新手问一个js按钮点击问题．

Question

<div class="col-sm-9">
<ul class="nav nav-pills">
<li class="active"> <a href="/">默认</a> </li>
<li> <a href="/?order=-pub_date" onclick="active(this);">话题1</a> </li>
<li> <a href="/?order=is_tui">主题1</a> </li>
<li> <a href="/?order=is_good">主题2</a> </li>
</ul>
</div>

有如上导航，现在默认 class="active" 在第一个li上面．

怎么写个js代码，　让点击哪个菜单　class="active" 就跑到哪个li里面？　　

Answer 1

  <script>
     var oUl = document.querySelector(".nav");
            
            oUl.onclick = function (e) {
                 oCur= oUl.querySelector(".active");
            if(oCur){
            oCur.className="";
            }
          e = e || window.event;
        var tag = e.target || e.srcElement;
        if(tag.nodeName.toLocaleLowerCase()=="li"){
           // console.log(tag.innerHTML);
             tag.className = "active"
        }
    };
  </script>

Answer 2

可以js绑定按钮点击事件：https://segmentfault.com/q/10...
也可以参考下这个：https://zhidao.baidu.com/ques...

Answer 3

这样就可以了；网站例子很多；
$("li").click(function(){
$(this).addClass('active').siblings().removeClass('active');
})

Answer 4

$('.nav').children().on('click',function(){//找到ul下面所有的li并添加点击事件
    $(this).addClass('active').siblings().removeClass('active');//li添加active类名，同时他的兄弟元素删除这个类名;
})

注释已经加好，看不懂的话可以继续问


另外在补充一种，后续有用，前期的话可以直接拿上用，看不懂也可以问我;
var oldClass=$('.act');
$('.nav').children().on('click',function(){
    $(this).addClass('act');
    oldClass.removeClass('act');oldClass=$(this);
})

Answer 5

$(".col-sm-9" ).tabs();
$(".col-sm-9").tabs( "option", "active", 1 );

Answer 6

HTML代码这样写:
<li> <a href="/?order=-pub_date">话题1</a> </li>
JS代码这样写：

$('a').click(function(event){
    var ul = $(event.target).parent('li').parent('ul')
    var lis = $('li', ul)
    lis.each(function(index, li) {
        li.removeClass('active')
    })
    $(event.target).parent('li').addClass('active')
})

原理是通过event.target找到其上一层的ul元素，然后找到ul中的所有li元素，最后对li元素的类名进行操作，去掉active，最后给现在点击的a的父元素li加上类名

Answer 7

如果不是使用类似vue，angular这些前端可以控制路由的框架开发，楼主的代码点击链接后会发生跳转，所以在本页面监听点击事件是不行的。

解决方案可以是在跳转页面后获得参数值，根据参数值做判断。

<div class="col-sm-9">
  <ul class="nav nav-pills">
   <li id="default" class="active"> <a href="/">默认</a> </li>
   <li id="pub_date"> <a href="/?order=-pub_date">话题1</a> </li>
   <li id="is_tu"> <a href="/?order=is_tui">主题1</a> </li>
   <li id="is_good"> <a href="/?order=is_good">主题2</a> </li>
  </ul>
</div>

function getUrlParam(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 
  var r = window.location.search.substr(1).match(reg);  
  if (r != null) return unescape(r[2]); return null; 
}

$(function() {
  var activeNavId = "default"
  var order = getUrlParam("order");
  if(!!order) {
     if(order.startsWith("-")) {
       order = order.substring(1);
     }
     if($("#"+order).length > 0) {
       activeNavId = order;
     }
  }
  $("li").removeClass("active");
  $("#" + activeNavId).addClass("active")
  
});