0

如何在页面加载中激活网页的第一个选项卡？
我使用 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;
    });
});

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

请帮忙。

4

2 回答 2

0

您应该在单击的选项卡之间切换“活动”类。见下文：

$('#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

于 2013-04-04T10:34:37.797 回答
0

您激活了第一个选项卡，您需要调用 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;
    });
});

需要您的 css 类.active{}来查看这将如何影响活动选项卡。

甚至你也可以试试这个：

    $('#sociallink ul li').click(function(){
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        return false;
    });
于 2013-04-04T10:36:08.697 回答