你的位置:首页 > Java教程

[Java教程]jQuery如何实现tab选项卡效果


jQuery如何实现tab选项卡效果:
选项卡功能在众多网站都在应用,不但美观,而且也可以优化网站布局,能够以最少的空间为浏览器提供尽可能多的内容,而且便于切换,以前此种功能都是利用js代码写的,下面就来介绍一下利用jQuery实现选项卡功能。
代码实例如下:

 

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">body, ul, li { margin: 0; padding: 0; list-style: none;}#tabbox { width: 600px; overflow: hidden; margin: 0 auto;}.tab_conbox { border: 1px solid #999; border-top: none;}.tab_con { display: none;}.tabs { height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%;}.tabs li { height: 31px; line-height: 31px; float: left; border: 1px solid #999; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative;} .tabs li a { display: block; padding: 0 20px; border: 1px solid #fff; text-decoration: none; outline: none;}.tabs li a:hover { background: #ccc;}.tabs .thistab, .tabs .thistab a:hover { background: #fff; border-bottom: 1px solid #fff;}.tab_con { padding: 12px; font-size: 14px; line-height: 175%;}</style><script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function () { jQuery.jqtab = function (tabtit, tab_conbox, shijian) {  $(tab_conbox).find("li").hide();  $(tabtit).find("li:first").addClass("thistab");  $(tab_conbox).find("li:first").show();  $(tabtit).find("li").bind(shijian, function () {   $(this).addClass("thistab").siblings("li").removeClass("thistab");   var activeindex = $(tabtit).find("li").index(this);   $(tab_conbox).children().eq(activeindex).show().siblings().hide();   return false;  }); }; $.jqtab("#tabs", "#tab_conbox", "click");});</script></head><body> <div id="tabbox">  <ul class="tabs" id="tabs">   <li><a href="#">div+css</a></li>   <li><a href="#">jQuery</a></li>   <li><a href="#">JSON</a></li>   <li><a href="#">搜索优化</a></li>  </ul>  <ul class="tab_conbox" id="tab_conbox">   <li class="tab_con">    <p>div+css</p>   </li>   <li class="tab_con">    <p>jQuery</p>   </li>   <li class="tab_con">    <p>JSON</p>   </li>   <li class="tab_con">    <p>搜索优化</p>   </li>  </ul> </div></body></html>

 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=5807

更多内容可以参阅:http://www.softwhy.com/jquery/