Beispiel für die Verwendung der Registerkarte „jquery.idTabs' code_jquery

idTabs ist ein auf JQuery geschriebenes und gekapseltes Plug-in. Es wird hauptsächlich zur Implementierung der Tab-Funktion verwendet. Gehen Sie einfach zur offiziellen Website: http://www.sunsean.com/idTabs / um die Plug-in-JS-Skriptdatei herunterzuladen und zu zitieren, gehen Sie einfach auf die Website

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

Das HTML-Layout und der Aufruf der Seite sind wie folgt:

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

Laut den offiziellen Website-Eingabeaufforderungen sollte das Schreiben des obigen Codes in der Lage sein, Tabs zu implementieren, aber leider ist der angezeigte Effekt überhaupt nicht der Tab, den ich möchte. Nach der Analyse habe ich den Grund gefunden und es stellte sich heraus, dass es sich um einen handelt Mangel an CSS-Stil-Unterstützung. Auf der offiziellen Website gibt es jedoch keinen relevanten CSS-Stil-Download, Sie können ihn also nur selbst schreiben:

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

Nach dem Hinzufügen des CSS-Stileffekts wird der Effekt wie unten gezeigt angezeigt: