Question

如何突出显示当前有效的标签??? 这是我的HTML代码。

   <a href="#tab1"></a>
   <a href="#tab2"></a>  
   <a href="#tab3"></a> 
   <a href="#tab4"></a>

这是我正在使用的jquery代码

$(document).ready(function(){
            $(".tabs").not(":first").hide();

        $(".tab .control a").click(function(){
            storage = $(this).attr("href");
            $(".tabs").hide();
            $(storage).show();
        });
    });

Answer 1

在标签中添加一些课程。然后创建将在被点击的元素上添加的CSS类。

HTML：

<a href="#tab1" class="tab">Tab 1</a>
<a href="#tab2" class="tab">Tab 2</a>

CSS：

.tab.active {
    background: gray;
}

JavaScript的：

$('.tab').on('click', function() {
    //    Remove .active class from all .tab class elements
    $('.tab').removeClass('active');
    //    Add .active class to currently clicked element
    $(this).addClass('active');
});

工作示例：https://jsfiddle.net/cr29y1tc/23/

如何使用jquery突出显示活动选项卡

1 个答案: