Home >Web Front-end >JS Tutorial >jquery.idTabs tab usage sample code_jquery

jquery.idTabs tab usage sample code_jquery

WBOY
WBOYOriginal
2016-05-16 16:37:301204browse

idTabs is a plug-in written and encapsulated based on Jquery. It is mainly used to implement the tab function. It is simple to operate. Just go to the official website: http://www.sunsean.com/idTabs/ to download the plug-in JS script file and quote it. Just go to the website

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

The HTML layout and call of the page are as follows:

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

According to the official website prompts, writing the above code should be able to implement tabs, but unfortunately, the displayed effect is not the tab I want at all. After analysis, I found the reason and it turned out to be a lack of CSS style support. However, the official website There is no relevant CSS style file download, so you can only write it yourself:

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

After adding the CSS style effect, the effect will appear, as shown below:

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn