Question

如何在页面加载时激活网页的第一个标签？
我使用jquery和 ul 标签来制作标签。

＆安培;单击单个选项卡后，它们应处于活动状态。

HTML代码：

<div id="sociallink">
    <ul>
        <li><a href="javascript:void(0);" class="tab1"><img class="sa_image" src="images/facebook.png" border="0" /></a></li>
        <li><a href="javascript:void(0);" class="tab2" ><img class="sa_image" src="images/tweeter.png" border="0" /></a></li>
        <li><a href="javascript:void(0);" class="tab3" ><img class="sa_image" src="images/message.png" border="0" /></a></li>
        <li><a href="javascript:void(0);" class="tab4" ><img class="sa_image" src="images/persnal.png" border="0" /></a></li>
    </ul>
</div>

jQuery代码：

$(document).ready(function() {

    $('#sociallink ul li:first').addClass('active');

    $('#sociallink ul li a').click(function(){
        var currentTab = $(this).attr('href');
        return false;
    });
});

运行此代码不会激活第一个选项卡，也不会点击其他未激活的选项卡。

请帮忙。

Answer 1

您应该在点击的标签之间切换“活跃”类。见下文：

$('#sociallink ul li a').click(function(){
    $(this).parent('li').siblings('li.active').removeClass('active');
    $(this).parent('li').addClass('active');
    var currentTab = $(this).attr('class');
    return false;
});

最好将属性class='tabx'分配给它的父li

Answer 2

您已激活第一个标签页，您需要调用li的点击并添加活动类，然后从其他标记中删除活动标记：

假设这是您的活动标签css类：

.active a{
    border:solid 1px red;
}

然后使用这个脚本：

$(document).ready(function() {          
    $('#sociallink ul li:first').addClass('active');

    $('#sociallink ul li a').click(function(){
        $(this).parent().siblings().removeClass('active');
        $(this).parent().addClass('active');
        return false;
    });
});

您需要.active{}的css类来了解这将如何影响活动标签。

甚至你可以尝试这个：

    $('#sociallink ul li').click(function(){
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        return false;
    });

使用jquery激活页面加载上的选项卡

2 个答案: