zoukankan      html  css  js  c++  java
  • jquery悬停tab

    <style>
     *{ margin:0; padding:0;}
     body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
     .tab { 240px;margin:50px;}
     .tab_menu { clear:both;}
     .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
     .tab_menu li.hover { background:#DFDFDF;}
     .tab_box { clear:both; border:1px solid #898989; height:100px;}
     .hide{display:none}
    </style>
    <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" >
        $(function(){
            var $div_li =$("div.tab_menu ul li");
            $div_li.hover(function(){
                $(this).addClass("hover") //当前<li>元素高亮
                       .siblings().removeClass("hover");  //去掉其它同辈<li>元素的高亮
                var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
                $("div.tab_box > div") //选取子节点。不选取子节点的话,会引起错误。如果里面还有div
                        .eq(index).show()   //显示 <li>元素对应的<div>元素
                        .siblings().hide(); //隐藏其它几个同辈的<div>元素
            })
        })
    //]]>
    </script>
    </head>
    <body>
    <div class="tab">
        <div class="tab_menu">
            <ul>
                <li class="selected">国际</li>
                <li>科技</li>
                <li>军事</li>
            </ul>
        </div>
        <div class="tab_box">
             <div>国际</div>
             <div class="hide">科技</div>
             <div class="hide">军事</div>
        </div>
    </div>
    </body>

  • 相关阅读:
    结构化编程:确定迭代循环控制for
    为什么就业难,因为信息化的威力
    结构化编程:单支条件选择控制
    C/C++ 标准输入输出重定向
    C语言中用scanf连续输入两个字符类型的问题
    void value not ignored as it ought to be
    不要做浮躁的嵌入式系统工程师
    INI配置文件的格式
    Linux 下串口编程入门
    时钟周期及秒(s) 毫秒(ms) 微秒(μs) 纳秒(ns) 皮秒(ps)之间转换
  • 原文地址:https://www.cnblogs.com/handsomer/p/4117929.html
Copyright © 2011-2022 走看看