zoukankan      html  css  js  c++  java
  • 用Juery实现网页选项卡

    首先前台代码

    View Code
    1 <div class="tab">
    2 <div class="tab_menu">
    3 <ul>
    4 <li class="selected">个人信息</li>
    5 <li class="selected">我的照片</li>
    6 <li class="selected">我的博客</li>
    7 <div class="clear"></div>
    8 </ul>
    9 </div>
    10 <div class="tab_box">
    11 <div class="box">我的QQ:1511109272</div>
    12 <div class="box hide">hi </div>
    13 <div class="box hide"> hello <br> </div>
    14 </div>
    15  </div>

    接着可以jquery代码设置

    View Code
    1 $(function() {
    2 //网页选项卡的切换
    3   var $menu_li = $("div.tab_menu ul li");
    4 $menu_li.click(function(){
    5 $(this).addClass("selected") //当前<li>高亮
    6   .siblings().removeClass("selected"); //去掉其它同辈<li>的高亮
    7   var index = $menu_li.index( $(this) ); //找到<li>子节点的索引
    8   $("div.tab_box > div") //索引为N的DIV显示出来
    9   .eq(index).show()
    10 .siblings().hide();
    11 })
    12 })

    然后CCS样式可以设置一下

    View Code
    1 .clear{ clear:both; height:0px; overflow:hidden;}
    2 .tab{ 400px; font-size:12px;}
    3 .tab_menu ul{ padding:0px;margin:0px;}
    4 .tab_menu li{ list-style:none; display:block; float:left;
    5 background:#C2CEFE; height:22px; line-height:22px;
    6 padding: 0px 8px; margin-right:6px; border:#86B4CA 1px solid;
    7 }
    8 .box{ 400px; height:200px; overflow:hidden; border:#A8C9D9 1px solid; padding:10px 8px; }
    9 .tab_menu ul li.selected{background:#dadada; cursor:pointer; }
    10 .hide{ display:none;}
  • 相关阅读:
    关于MySQL数据库优化的部分整理
    PHP跨域form提交
    px、dp和sp,这些单位有什么区别?
    301和302 Http状态有啥区别?
    PHP HTTP请求
    php的http_build_query使用
    nginx ssi 模块
    MongoDB学习笔记(一) MongoDB介绍及安装(摘)
    Django Admin 录入中文错误解决办法
    关于python字符串连接的操作
  • 原文地址:https://www.cnblogs.com/wsl2011/p/2079968.html
Copyright © 2011-2022 走看看