AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

基于jQuery实现选项卡效果

51自学网 http://www.wanshiok.com
jQuery,选项卡

选项卡,不多说了,做不做网络的都知道,我学的比较晚,现在发一个选项卡制作的代码

效果下图所示:

源代码:

<html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title></title>  <meta name="keywords" content=" keywords" />  <meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.4.2.min.js"></script><style type="text/css">  body{font-size:13px}  ul,li{margin:0;padding:0;list-style:none}  #menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer}  #menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative}  #content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px}  #content li{display:none}  #content li.conFocus{display:block}</style><body><script type="text/javascript">  $(function(){    $('#menu li').each(function(index){      $(this).click(function(){        $('#menu li.tabFocus').removeClass('tabFocus');        $(this).addClass('tabFocus');        $('#content li:eq('+index+')').show().siblings().hide();      })    });  });</script><ul id="menu">  <li class="tabFocus">家居</li>  <li>电器</li>  <li>二手</li></ul><ul id="content">  <li class="conFocus">这是家居的内容</li>  <li>这是电器的内容</li>  <li>这是家居的内容</li></ul></body></html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持wanshiok.com。


jQuery,选项卡  
上一篇:快速实现JS图片懒加载(可视区域加载)示例代码  下一篇:jQuery和CSS仿京东仿淘宝列表导航菜单