jquery.idTabs contoh penggunaan kod_jquery tab

idTabs ialah pemalam yang ditulis dan dikapsulkan berdasarkan Jquery Ia digunakan terutamanya untuk melaksanakan fungsi tab Ia mudah untuk dikendalikan. Hanya pergi ke laman web rasmi: http://www.sunsean.com/idTabs / untuk memuat turun fail skrip JS pemalam dan petiknya Hanya pergi ke tapak web

<script src="js/jquery.idTabs.min.js" type="text/javascript"></script>

Susun atur HTML dan panggilan halaman adalah seperti berikut:

<div id="tabsbox" class="tabsbox">
<ul>

<li><a href='#tab0' class='selected'>技术简介</a></li>

<li><a href='#tab1' class=''>技术优势</a></li>

<li><a href='#tab2' class=''>技术路线</a></li>

<li><a href='#tab3' class=''>服务流程</a></li>

<li><a href='#tab4' class=''>样本要求</a></li>

</ul>
<div class="tabscont">

<div id='tab0'>1依托自主研发的技术平台，可为广大科研工作者提供常规测序服务和特色测序服务，为您的科研助一臂之力！</div>

<div id='tab1'>2依托自主研发的技术平台，可为广大科研工作者提供常规测序服务和特色测序服务，为您的科研助一臂之力！</div>

<div id='tab2'>3依托自主研发的技术平台，可为广大科研工作者提供常规测序服务和特色测序服务，为您的科研助一臂之力！</div>

<div id='tab3'>4依托自主研发的技术平台，可为广大科研工作者提供常规测序服务和特色测序服务，为您的科研助一臂之力！ Text></div>

<div id='tab4'>511111111依托自主研发的技术平台，可为广大科研工作者提供常规测序服务和特色测序服务，为您的科研助一臂之力！</div>

</div>
</div>

<script type="text/javascript">
$("#tabsbox ul").idTabs("tabs0");
</script>

Menurut gesaan laman web rasmi, menulis kod di atas sepatutnya dapat melaksanakan tab, tetapi malangnya, kesan yang dipaparkan bukanlah tab yang saya mahukan sama sekali Selepas analisis, saya mendapati sebabnya dan ternyata a kekurangan sokongan gaya CSS Walau bagaimanapun, laman web rasmi Tiada muat turun fail gaya CSS yang berkaitan, jadi anda hanya boleh menulisnya sendiri:

<style type="text/css">
.tabsbox ul {border-bottom:1px solid #dce6e7;}
.tabsbox ul li {display:inline-block;border:1px solid #dce6e7;border-bottom:none;
line-height:30px;height:30px;width:80px; text-align:center;margin-right:10px;}
.tabsbox ul li a.selected {background-color:#fff;display:block;margin:0px;padding-bottom:5px;font-weight:bold;}
.tabsbox ul li a {text-decoration:none;}
.tabscont {margin-top:10px;}
</style>

Selepas menambah kesan gaya CSS, kesannya akan muncul, seperti yang ditunjukkan di bawah: