jQuery网页选项卡

  1.  
  2.  
  3.      
  4.          
  5.          
  6.         网页选项卡 
  7.          
  8.             body,ul,li{margin:0; padding:0; list-style:none;} 
  9.             .wrap{width:300px; height:200px; margin:10px auto; border:1px solid #000; padding:10px;} 
  10.             .tab_menu{clear:both; margin-top:10px;} 
  11.             .tab_box{clear:both;} 
  12.             ul li{float:left; width:60px; height:30px; line-height:30px; text-align:center; margin-right:10px; pink;} < /span>
  13.             .selected{background:#999;} 
  14.             .tab_box div{height:150px; border:1px solid #f00;} 
  15.             .hid{display:none;} 
  16.             .hover{background:#f00;} 
  17.          
  18.          
  19.          
  20.             $(function(){ 
  21.                 var $div_li=$("div.tab_menu ul li"); 
  22.                 $div_li.click(function(){ 
  23.                     $(this).addClass("selected") 
  24.                            .siblings().removeClass("selected"); 
  25.                     var index=$div_li.index(this);//获取当前单击的li在全部li中的索引 
  26.                     $("div.tab_box>div") 
  27.                            .eq(index).show()   //显示li元素对应的div元素 
  28.                            .siblings().hide(); 
  29.                 }).hover(function(){//添加鼠标划入划出效果 
  30.                     $(this).addClass("hover"); 
  31.                 },function(){ 
  32.                     $(this).removeClass("hover"); 
  33.                 }) 
  34.             }) 
  35.          
  36.      
  37.      
  38.          
  39.              
  40.                 
       
    •                     时事
    •  
    •                     
    • 体育
    •  
    •                     
    • 娱乐
    •  
    •                 
     
  41.             
 
  •              
  •                 
    时事
     
  •                 体育
  •  
  •                 娱乐
  •  
  •              
  •          
  •      
  •  
  •  

    创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、成都网站建设、成都外贸网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的紫云网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!


    分享标题:jQuery网页选项卡
    文章起源:http://bzwzjz.com/article/igojjh.html

    其他资讯

    Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
    友情链接: 网站建设改版 成都网站制作 品牌网站建设 手机网站制作 成都网站建设公司 网站建设公司 成都网站设计 达州网站设计 专业网站建设 四川成都网站制作 成都网站制作 营销网站建设 重庆企业网站建设 成都网站建设公司 成都网站设计 成都企业网站建设 上市集团网站建设 成都响应式网站建设 网站制作 成都网站建设 移动手机网站制作 品牌网站建设