exemple d'utilisation de l'onglet jquery.idTabs code_jquery

idTabs est un plug-in écrit et encapsulé basé sur Jquery. Il est principalement utilisé pour implémenter la fonction onglet. Il est simple à utiliser. Il suffit d'aller sur le site officiel : http://www.sunsean.com/idTabs. / pour télécharger le fichier script JS du plug-in et le citer Il suffit de se rendre sur le site

.

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

La mise en page HTML et l'appel de la page sont les suivants :

<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>

Selon les invites du site officiel, l'écriture du code ci-dessus devrait permettre d'implémenter des onglets, mais malheureusement, l'effet affiché n'est pas du tout l'onglet que je souhaite. Après analyse, j'ai trouvé la raison et il s'est avéré que c'était un onglet. manque de prise en charge du style CSS Cependant, le site officiel Il n'y a pas de téléchargement de fichier de style CSS pertinent, vous ne pouvez donc l'écrire que vous-même :

<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>

Après avoir ajouté l'effet de style CSS, l'effet apparaîtra, comme indiqué ci-dessous :