[英]change active class of ul list using anchor tag click
我試圖通過單擊其中的鏈接來添加或刪除列表元素的活動類。
<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 類如上。 但它沒有按預期工作。 所以有人知道怎么解決嗎?
$('.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>
我的 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
存儲數據
嘗試:
$(".btn1").click(function(){
$("ul li").removeClass('active');
$("#l1").toggleClass('active');
window.open ('/one');
});
注意第 2 行 // 將從所有列表中的所有項目符號中刪除活動類向選擇器添加 #id 以指定特定列表。
// 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.