zoukankan      html  css  js  c++  java
  • jquery实现选项卡(两句即可实现)

    <!DOCTYPE HTML>
    <html>

        <head>
            <meta charset="utf-8">
            <meta name="description" content="描述">
            <meta name="keywords" content="关键字">
            <title>布局</title>
            <script src="js/jquery-1.9.1.min.js"></script>
            <style>
                #ul {
                    height: 30px;
                    margin-bottom: 10px;
                }
                #ul li {
                    height: 30px;
                    line-height: 30px;
                    list-style: none;
                    padding: 0 15px;
                    border: 1px solid #dfdfdf;
                    float: left;
                    cursor: pointer;
                }
                #ul .current {
                    background: #f4f4f4 repeat;
                    height: 30px;
                }
                .content {
                     300px;
                    height: 200px;
                }
                .content div {
                     300px;
                    height: 200px;
                    border: 1px solid #dfdfdf;
                    display: none;
                }
                .content .show {
                    display: block;
                }
            </style>
            <script>
                $(function() {
                    $('#ul>li').click(function() {
                        $(this).addClass('current').siblings().removeClass('current');
                        //根据li索引值确定显示哪个DIV
                        $('.content>div').eq($(this).index()).show().siblings().hide();
                    });
                })
            </script>
        </head>

        <body>
            <ul id="ul">
                <li class="current">title1</li>
                <li>title2</li>
                <li>title3</li>
            </ul>
            <div class="content">
                <div class="show">content111。。。</div>
                <div>content222。。。</div>
                <div>content333。。。</div>
            </div>
        </body>

    </html>

  • 相关阅读:
    [原]openstack-kilo--issue(十一)Failed connect to 169.254.169.254:80; No route to host
    [转]pycharm active code
    [原]openstack-kilo--issue(九) heat stacks topology中图形无法正常显示
    [原]CentOS 7 网卡子接口的创建
    [转]Shell中read的常用方式
    [转]输出带颜色的shell
    第十七节:从状态机的角度async和await的实现原理(新)
    第十六节:时隔两年再谈异步及深度剖析async和await(新)
    第十一节:SQLServer事务写法、各种锁、事务隔离级别
    第十七节:SQL中的一些常用SQL积累(持续更新)
  • 原文地址:https://www.cnblogs.com/zhouyx/p/4534043.html
Copyright © 2011-2022 走看看