Question

我已尝试使用此代码来处理这个小提琴http://jsfiddle.net/TheNix/sR3Ub/6/甚至其他代码但它在我的xamp上运行不正常。其他一切都在工作，但是当我点击联系我们或回家时，它们会变为活动状态一秒钟，然后常见问题再次变为活动状态。请帮我看看我哪里出错了。是否有另一种方式告诉用户他们与激活链接的区别？

我的.PHTML文件

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div class="list-wrapper ">

    <li class="list-header">
        <a href="#a"  class="active">
        faqs
        </a> 
   </li>

    <li class="list-header">
        <a href="#b" >
          contact us
        </a> 
    </li>

    <li class="list-header">
        <a href="#c">
           about us
        </a> 
    </li>
</div>

    <script>
      $('a').on('click', function(){
        $('div.list-wrapper').find('a.active').removeClass('active');
        $(this).addClass('active');
    });
     </script>

我的.CSS文件

                 .list-wrapper { list-style: none;}
        .list-wrapper li { padding-left: 1em; text-indent: -.7em;}
        .list-wrapper li:before {
            content: "•  ";
            color: #C0C0C0; /* or whatever color you prefer */
        }

        .list-wrapper a:link,
        .list-wrapper a:visited   { color: #C0C0C0; text-decoration: none; }
        .list-wrapper a:hover  { color: #58595B; text-decoration: none; }
        .list-wrapper a.active,
        .list-wrapper a:active  { color: #E6BD13; text-decoration: none; }

Answer 1

您需要将活动类应用于li而不是li a，然后点击li - 清除所有li中的活动类，然后将其应用于单击的li。

然后，CSS基于更改a中li.active的颜色，而不是在自己上设置活动类。

另外 - 不确定为什么要在一个CSS规则中指定list-style：none - 仅在另一个CSS规则中指定列表项目符号。

$(document).ready(function(){
   $('.list-wrapper li').on('click', function(){
     $('.list-wrapper li').removeClass('active');
     $(this).addClass('active');
   })
});

.list-wrapper { list-style: none;}
.list-wrapper li { padding-left: 1em; text-indent: -.7em;}
 .list-wrapper li:before {
   content: "•  ";
    color: #C0C0C0; /* or whatever color you prefer */
 }

.list-wrapper a:link,
.list-wrapper a:visited { color: #C0C0C0; text-decoration: none; }
.list-wrapper a:hover   { color: #58595B; text-decoration: none; }

.list-wrapper li.active a{ color: #E6BD13; text-decoration: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div class="list-wrapper ">
    <li class="list-header active">
        <a href="#a">
        faqs
        </a> 
   </li>
   <li class="list-header">
        <a href="#b" >
          contact us
        </a> 
    </li>
    <li class="list-header">
        <a href="#c">
           about us
        </a> 
    </li>
</div>

如何使用CSS和Jquery更改活动链接的颜色

1 个答案: