使用锚标记单击更改 ul 列表的活动类

Question

我试图通过单击其中的链接来添加或删除列表元素的活动类。

<ul>
   <li id="l1" class=""><a href="javascript:;" class="btn1"> one</a></li>
   <li id="l2" class=""><a href="javascript:;" class="btn2">two</a></li>                                                   
</ul>

 $('.btn1').click(function() {     
    $( "#l1" ).addClass( "active" );   
    $( "#l2" ).removeClass( "active" );        
    window.open ('/one');

});

$('.btn2').click(function() {       
    $( "#l2" ).addClass( "active" );
    $( "#l1" ).removeClass( "active" );     
    window.open ('/two');

});

我的 html 和 css 类如上。 但它没有按预期工作。 所以有人知道怎么解决吗？

Answer 1

 $('.btn').click(function() { $('.btn').closest('li').removeClass("active") $(this).closest('li').addClass("active") console.log($(this).data("url")) })

 li.active{color:red}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li id="l1" class=""><a href="javascript:;" class="btn" data-url="/one"> one</a></li> <li id="l2" class=""><a href="javascript:;" class="btn" data-url="/two">two</a></li> </ul>

Answer 2

我的 HTML 和 CSS 类如上

基本上，您的代码运行良好。 你需要添加像.active{ color:red;}这样的 CSS。

但是，监听每个按钮的click事件并不是一件好事。 想象一下，您有大约 10/100/1000 按钮，那么您必须像这样复制/粘贴代码？

你应该记住：不要重复自己。

因此，我为您重构了如下代码。 干杯!

 $('.btn').click(function() { $('.btn').closest('li').removeClass("active"); $(this).closest('li').addClass("active"); var content = $(this).data('value'); $("#content").html(content); });

 .active{ color:red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li id="l1" class=""><a href="javascript:;" data-value="Content1" class="btn"> one</a></li> <li id="l2" class=""><a href="javascript:;" data-value="Content2" class="btn">two</a></li> </ul> <div id="content" style="width:100px; height: 100px"> </div>

编辑

基本上，您应该获取内容然后将其分配给下面的div content而不是导航。 如果仍要导航，则应使用localStorage存储数据

Answer 3

尝试：

$(".btn1").click(function(){
$("ul li").removeClass('active'); 
$("#l1").toggleClass('active');
window.open ('/one');
});

注意第 2 行 // 将从所有列表中的所有项目符号中删除活动类向选择器添加 #id 以指定特定列表。

Answer 4

 // One click handler for all buttons/links. $('.btn').click(function(event) { // Remove class from all buttons. $('.btn').parent().removeClass('active'); // Get the specific button that was clicked. var btn = $(this); // Add active class to it's parent. btn.parent().addClass('active'); //open from the data-link attribute on the link. // though, window.open will probably be blocked by the browser popup blocker. window.open(btn.attr('data-link')); });

 .active { background-color: #ff0000; } a.btn { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <!-- you could save where to link to in a data attribute, though I am not sure why you wouldn't just have it in href --> <li id="l1" class=""><a href="/one" data-link="/one" class="btn btn1"> one</a></li> <li id="l2" class=""><a href="/two" data-link="/two" class="btn btn2">two</a></li> </ul>