Question

我有一些JQuery会将一个类设置为活动onclick。但是当我加载页面时，没有什么是＆＃34; Active＆＃34;直到我点击其中一个列表项。有没有办法可以在页面加载时选择一个？

当前的JQuery：

   $(".setup-nav").on( "click", "li", function() {
    $(".setup-nav li.active").removeClass("active");
    $(this).addClass("active");
   });

Answer 1

只需在HTML项目中添加有效内容即可。

<ul class="setup-nav">
    <li class="active">This is your fist active item</li>
    <li>Second Item</li>
</ul>

并且，为了防止通过软重新加载某些浏览器可能发生的页面而保留最后一次更改，只需使用：

$(".setup-nav li.active").trigger('click');

Answer 2

您可以更改代码，为代码进行一些更改以实现：）

 $(".setup-nav li").click(function() {
    $(".setup-nav li").removeClass("active");
    $(this).addClass("active");
   });

ul.setup-nav li{
  background: #FFF;
  color:#666;
  cursor: pointer;
  }
.setup-nav .active{
background: #666;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="setup-nav">
  <li class="active">ABC</li>
  <li class="">ABC</li>
  <li class="">ABC</li>
  
  </ul>

Answer 3

您可以使用localStorage

 $(document).ready(function(){

     var active = parseFloat(localStorage.getItem("activeLi"));
     $(".setup-nav li:nth-child(" + active + ")").addClass("active");

     $(".setup-nav").on("click","li",function(){

         $("li").removeClass("active");

         $(this).addClass("active");

         localStorage.setItem("activeLi",$(this).index() + 1);

     })
 })

JQuery页面加载：活动类

3 个答案: