在ul li中选择一个href更改颜色

on select a href change color in ul li

本文关键字：一个 href 颜色 li ul 选择      更新时间：2023-09-26

这里我使用选项卡菜单来选择不同的选项卡，我想更改所选按钮的颜色，当我选择按钮时，将其更改为颜色

<div id="tabs">
    <ul>
    <li><a class="active" href="#" name="tab1">Tempu Services</a></li>
    <li><a href="#" name="tab2">Buy and Sale</a></li>
    <li><a href="#" name="tab2">Job Service</a></li>
    </ul>
</div>

和我的css id我的JavaScript是

<script>
    $(window).load(function(){
    $("#tabs ul  li a").click(function () {
        $("#tabs ul li a").not(this).removeClass("active").addClass('unactive')
        $(this).toggleClass("unactive").toggleClass("active");
    });
});//]]>
</script>

我也将这个脚本用于这个

        <script>
$(document).ready(function() {
    $("#contenty").find("[id^='tab']").hide(); 
    $("#tabs li:first").attr("id","currenty"); 
    $("#contenty #tab1").fadeIn(); 
    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "currenty"){ 
         return;       
        }
        else{             
          $("#contenty").find("[id^='tab']").hide(); 
          $("#tabs li").attr("id",""); //Reset id's
          $(this).parent().attr("id","current"); 
          $('#' + $(this).attr('name')).fadeIn(); 
        }
    });
});
</script>

并且我使用jquery 1.9.1

最简单的方法是

$("#tabs ul  li a").click(function () {
    var active_link = $("#tabs ul li a").filter('.active').removeClass('active'); // filter elements only with class active and remove it.
    $(this).toggleClass("active"); // toggle active class of this element
});

演示

Try，

$("#tabs ul  li a").click(function () {
    $("#tabs ul li a").removeClass("active").addClass('unactive')
    $(this).toggleClass("active unactive");
});

演示

$(document).ready(function () {
   $("#tabs ul  li a").click(function () {
     $('#tabs ul  li a.active').removeClass('active').addClass('unactive');
     $(this).addClass('active');
   });
});

尝试将代码包装在就绪事件处理程序中，而不是加载。

相关文章：