使用jquery激活页面加载标签

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

你有第一个选项卡激活时，你需要调用里的点击添加活动类，然后清除活性从别人：

假设这是你的活动标签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; 
    });