Home >Web Front-end >JS Tutorial >jquery.idTabs tab usage sample code_jquery
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: