zoukankan      html  css  js  c++  java
  • Jquery实现的小案例3、小选项卡

    实现的功能介绍:实现点击一个模块的内容然后出现各自属于自己的内容

                                     利用css样式实现的功能

                                               在鼠标移上去会实现变色 会变成小手、、、

    <html>

    <head>
    <meta charset="utf-8">
    <style>
        *{margin:0;padding:0}
        body{font-size:20px;300px;margin:5px auto}
        .tab_menu ul li{list-style:none;float:left;50px;border:1px solid pink;line-height:30px;margin-left:20px;border-bottom:none;text-align:center;cursor:pointer}
        .tab_content{clear:both;border:1px solid #9f5;height:200px;margin-left:20px;padding-left:10px;}
        .hide{display:none}
        .tab_selected{background:#aaa}
        .hover{background:#9f5}

    </style>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script>//在此处的Jquery文件封装的js文件下载地址http://download.csdn.net/detail/feilong_12/5210621
       /*
          1、鼠标点击哪个栏目,内容框要显示该栏目对应的内容
          2、同时该栏切换背景颜色
       */
       $(function(){
          var $li=$("div.tab_menu ul li");
          $li.click(function(){
            //获得当前点击的元素在集合中的索引
            var $index=$li.index(this);
            $("div.tab_content div").eq($index).show().siblings().hide();
            $(this).addClass("tab_selected").siblings().removeClass("tab_selected");
          }).hover(function(){
               $(this).addClass("hover");
            },function(){
               $(this).removeClass("hover");
          })
       })
    </script>
    </head>
    <body>
        <div class="tab">
           <div class="tab_menu">
              <ul>
                <li class="tab_selected">时事</li>
                <li>体育</li>
                <li>娱乐</li>
                </ul>
           </div>
           <div class="tab_content">
               <div>时事</div>
               <div class="hide">体育</div>
               <div class="hide">娱乐</div>
           </div>
        </div>
    </body>
    </html>

  • 相关阅读:
    古谚、评论与论断、名篇与名言
    重读《西游记》
    重读《西游记》
    命名之法 —— 时间、季节、地点
    命名之法 —— 时间、季节、地点
    文言的理解 —— 古时的称谓、别称、别名
    文言的理解 —— 古时的称谓、别称、别名
    Oracle GoldenGate for Oracle 11g to PostgreSQL 9.2.4 Configuration
    瀑布 敏捷 文档
    POJ 1325 ZOJ 1364 最小覆盖点集
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/2995426.html
Copyright © 2011-2022 走看看