织梦二次开发,二次开发,李丕长,网站php二次开发,做网站,模板设计,jquery效果,jquery特效

当前位置: 主页 > 网友推荐 >

简单实用选项卡基本切换

时间:2013-06-04 11:55作者:dete 点击:
运行网址:http://www.uichoose.com/index.html html代码 div class = ceshi ul class = ceshi_ul id = ceshi_id li class = tm-selected a href = # title = # 列表一 / a / li li a href = # title = # 列表二 / a / li li a href = # title =
 

运行网址:http://www.uichoose.com/jQuery+js/ceshi.html

html代码

  1. <div class="ceshi"> 
  2.     <ul class="ceshi_ul" id="ceshi_id"> 
  3.         <li class="tm-selected"><a href="#" title="#">列表一</a></li> 
  4.            <li><a href="#" title="#">列表二</a></li> 
  5.            <li><a href="#" title="#">列表三</a></li> 
  6.        </ul> 
  7.        <div id="conten"> 
  8.            <div> 
  9.                内容1 
  10.            </div> 
  11.            <div style="display:none"> 
  12.                内容2 
  13.            </div> 
  14.            <div style="display:none"> 
  15.                内容3 
  16.            </div> 
  17.        </div> 
  18.    </div> 

css

 

  1. .ceshi{ 
  2.     background:#F5F3F0; 
  3.     border: 1px solid #D2D2D2; 
  4.     margin-bottom: 10px; 
  5.     padding-bottom: 3px; 
  6.     width: 788px; 
  7.     } 
  8. .ceshi_ul{ 
  9.     background-color: #FFFFFF; 
  10.     border-bottom: 1px solid #D2D2D2; 
  11.     height: 30px; 
  12.     position:relative; 
  13. .ceshi_ul li { 
  14.     float: left; 
  15.     height: 28px; 
  16.     line-height: 28px; 
  17.     margin-left: -1px; 
  18.     overflow: hidden; 
  19.     padding: 1px 0; 
  20.  
  21. .ceshi_ul .tm-selected { 
  22.     border-top: 4px solid #B10000; 
  23.     height: 28px; 
  24.     margin-top: -1px; 
  25.     padding: 0; 
  26.     position: relative; 
  27.     z-index: 1; 
  28. .ceshi_ul .tm-selected, .ceshi_ul_Box { 
  29.     background-color: #F5F3F0; 
  30. .ceshi_ul a { 
  31.     border-left: 1px solid #D2D2D2; 
  32.     color: #333333; 
  33.     float: left; 
  34.     font-size: 14px; 
  35.     font-weight: 700; 
  36.     padding: 0 20px; 
  37.     text-decoration: none; 
  38.  
  39. .ceshi_ul .tm-selected a { 
  40.     border-right: 1px solid #D2D2D2; 
  41.     height: 28px; 
  42.     line-height: 24px; 

jquery

 

  1. $(document).ready(function() { 
  2.     //$("#ceshi_id").children("li").eq(0).find(".tm-selected").show(); 
  3.     $("#ceshi_id").children("li").each(function(index) { 
  4.          
  5.         var thisid=$(this); 
  6.         thisid.click( 
  7.         function(){ 
  8.             thisid.addClass("tm-selected"); 
  9.             thisid.siblings().removeClass("tm-selected");        
  10.             $("#conten >div").eq(index).show(); 
  11.             $("#conten >div").eq(index).siblings().hide(); 
  12.              
  13.         }); 
  14.          
  15.     }); 
  16. }); 

 

顶一下
(2)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
dete 查看详细资料 发送留言 加为好友 用户等级:高级会员 注册时间:2013-05-14 09:05 最后登录:2014-11-21 02:11
无觅相关文章插件,快速提升流量