Question

jquery 默认tab项 我想默认tab3

js代码如下：
$(function(){

/*tab标签切换*/
function tabs(tabTit,on,tabCon)
{
$(tabCon).each(function()
{
$(this).children().eq(0).show();

});

$(tabTit).each(function()
{
$(this).children().eq(0).addClass(on);
});

$(tabTit).children().click(function()
{
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabTit).children().index(this);
$(tabCon).children().eq(index).show().siblings().hide();
});
}

tabs(".investment_title","on",".investment_con");
})

css代码如下：
@charset "utf-8";
/* CSS Document */

.investment_f{ width:890px; margin:20px auto}
.investment_f .investment_title{height:44px; width:960px; overflow:hidden}
.investment_title div{ width:131px; height:44px; background:url(../images/userbase/invest_detail_22.png); float:left; margin-right:6px; display:inline; font-size:14px; font-weight:bold; text-align:center; line-height:46px; color:#797979; cursor:pointer; margin-left:1px;}
.investment_title a,.investment_title a:link,.investment_title a:visited,.investment_title a:hover{ color:#555;width:131px; height:44px;display:inline-block}
.investment_title div.on a,.investment_title div.on a:link,.investment_title div.on a:visited,.investment_title div.on a:hover{ color:#797979}
.investment_title div.on{background:url(../images/userbase/invest_detail_18.png); color:#797979}
.investment_con{ clear:both; background:#fff; border:1px solid #EDEDED;padding:20px;}
.investment_con_list{display:none;}

调用如下：

<?php
?>
<link rel="stylesheet" type="text/css" media="all" href="../css/style_tab.css">

<script language="javascript" src="../js/common.js"></script>

<script language="javascript">

<div class="investment_f">

<div class="investment_title">
<div class="on">tab1</div>
<div>tab2</div>
<div>tab3</div>
<div>tab4</div>
<div>tab5</div>
<div>tab6</div>
</div>

<div class="investment_con">
<div class="investment_con_list">
tab1
</div>
<div class="investment_con_list">
tab2
</div>
<div class="investment_con_list">
tab3
</div>
<div class="investment_con_list">
tab4
</div>
<div class="investment_con_list">
tab5
</div>
<div class="investment_con_list">
tab6
</div>
</div>
</div>
<?php
?>

Answer 1

function tabs(tabTit,on,tabCon){
    $(tabTit).children().click(function(){
        $(this).addClass(on).siblings().removeClass(on);
        var index = $(tabTit).children().index(this);
        $(tabCon).children().eq(index).show().siblings().hide();
    }).eq(2).click();//绑定事件后，触发个tab3的点击事件就行了。
}

Answer 2

　　js:
　　function tabs(tabTit,on,tabCon)
　　{
　　$(tabCon).each(function()
　　{
　　$(this).children().eq(2).show();
　　
　　});
　　
　　$(tabTit).each(function()
　　{
　　$(this).children().eq(2).addClass(on);
　　});
　　
　　$(tabTit).children().click(function()
　　{
　　$(this).addClass(on).siblings().removeClass(on);
　　var index = $(tabTit).children().index(this);
　　$(tabCon).children().eq(index).show().siblings().hide();
　　});
　　}
　　默认的eq(0)改为eq(2)

　　html:
　　<div class="investment_title">
　　<div>tab1</div>
　　<div>tab2</div>
　　<div class="on">tab3</div>
　　<div>tab4</div>
　　<div>tab5</div>
　　<div>tab6</div>
　　</div>
html中的样式on加到tab3上