zoukankan      html  css  js  c++  java
  • Jquery实现简单选项卡

    <html>
    <head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    </head>
    <style>
    .tab{width:400px;height:400px;border:1px solid red;}
    .tab-menu{height:100px;width:400px;border:1px solid grey;}
    .tab-menu ul{list-style:none;}
    .tab-menu li{display:block;width:30%;float:left;border:1px solid blue;}
    .tab-box div{width:400px;height:300px;border:1px solid #ff4200;display:none;}
    /* 让第一个框显示出来 */
    .tab-box div:first-Child{display:block;} 
    /* 改变选项卡选中时候的样式 */
    .change{background:red;} 
    </style>
    <script>
    $().ready(function(){
        $(".tab-menu li").mouseover(function(){
        //通过 .index()方法获取元素下标,从0开始,赋值给某个变量
            var _index = $(this).index();
        //让内容框的第 _index 个显示出来,其他的被隐藏
            $(".tab-box>div").eq(_index).show().siblings().hide();
        //改变选中时候的选项框的样式,移除其他几个选项的样式
        $(this).addClass("change").siblings().removeClass("change");
        });
    });
    </script>
    <body>
        <div class="tab">
            <div class="tab-menu">
                <ul>
                    <li>新服</li>
                    <li>爆服</li>
                    <li>大服</li>
                </ul>
            </div>
            <div class="tab-box">
                <div>123</div>
                <div>456</div>
                <div>789</div>
            </div>
        </div>
    </body>
    </html>
  • 相关阅读:
    POST
    界面,数据下载
    异步下载
    Cell
    循环&信息添加&颜色修改
    通讯录
    图片循环
    多删搜索
    图片滚动
    TableView
  • 原文地址:https://www.cnblogs.com/kangshuai/p/9011648.html
Copyright © 2011-2022 走看看