Question

有人可以告诉我为什么当我从一个类别转到另一个类别时，我的链接不会保持活动状态吗？我应该包括更多内容？我还包括了jQuery库。

这是我的css：

.themesButton
{

  background-color:transparent;
  border:1px solid #61BD6D;
  display:inline-block;
  cursor:pointer;
  color:#61BD6D;
  font-family:Arial;
  font-size:12px;
  padding:8px 30px;
  text-decoration:none;
  width: 178px;
  height: 35px;
  margin-left: 15px;
}


.themesButton .active
{

  background-color:transparent;
  border:1px solid #61BD6D;
  display:inline-block;
  cursor:pointer;
  color:#61BD6D;
  font-family:Arial;
  font-size:12px;
  padding:8px 30px;
  text-decoration:none;
  width: 178px;
  height: 35px;
  margin-left: 15px;
}

这些是我的链接：

<a href="/dizainu-parduotuve/" style="text-decoration: none;" class="themesButton">Visi dizainai</a>
    <a href="/dizainai/kategorija/asmenines-svetaines" style="text-decoration: none;" class="themesButton">Asmeninės</a>
    <a href="/dizainai/kategorija/parduotuviu-dizainai" style="text-decoration: none;" class="themesButton">Parduotuvių dizainai</a>
    <a href="/dizainai/kategorija/zaidimu-dizainai" style="text-decoration: none;" class="themesButton">Žaidimų dizainai</a>
    <a href="/dizainai/kategorija/ivairus-dizainai" style="text-decoration: none;" class="themesButton">Įvairus dizainai</a>

这是我的功能：

     <script>
        $(function() {
             var pgurl = window.location.href.substr(window.location.href
        .lastIndexOf("/")+1);
             $(".themesButton").each(function(){
                  if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
                  $(this).addClass("active");
             })
        });
        </script>

Answer 1

在CSS中，您有.themesButton .active。这是为了寻找具有类.themesButton的{{1}}的子元素，而不是具有这两个类的元素。如果删除类之间的空格，它将查找具有两个类的元素。即active

此外，两个声明都具有相同的属性，因此当一个声明处于活动状态时，您将无法区分它们。

JSFiddle

制作有效的导航链接

1 个答案: