zoukankan      html  css  js  c++  java
  • 选项卡切换

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>tab</title>
        <style>
            .tab1{
    
                margin-left: 40px;
            }
            .tab1 ul li{
                 100px;
    
                /*margin-right: 10px;*/
                float: left;
                list-style: none;
            }
            .tab2{
                 100%;
    
    
            }
            .tab2 ul{
                 400px;
                height: 100px;
                background: #d74147;
                /*margin-right: 10px;*/
                float: left;
                list-style: none;
                display: none;
    
            }
            .hover{
                display: block !important;
                background: #dd0077 !important;
    
            }
            .current{
                background: #d74147;
                display: block;
                 400px;
            }
        </style>
        <script src="js/jquery-1.7.1.js"></script>
        <script>
            $(function(){
                $('.tab1 ul li').on('click',function(){
                    var $this = $(this);
                    var targetContentId = $this.attr('data-target');
                    var $target = $('#' + targetContentId);
                    $('.tab1').find('li').removeClass('current');
                    $this.addClass('current');
                    $('.tab2').find('ul').removeClass('hover');
                    $target.addClass('hover');
                });
            });
        </script>
    </head>
    <body>
    <div class="tab1">
        <ul>
            <li class="current" data-target="content1">1</li>
            <li data-target="content2">2</li>
            <li data-target="content3">3</li>
            <li data-target="content4">4</li>
        </ul>
    </div><br />
    <div class="tab2">
        <ul class="hover" id="content1">11111</ul>
        <ul id="content2">2222</ul>
        <ul id="content3">33333</ul>
        <ul id="content4">4444444</ul>
    </div>
    </body>
    </html>
    

      

  • 相关阅读:
    Sql2000分页效率
    CSS笔记
    向模态窗体传递参数和获取返回值
    css 实现div 内容垂直居中
    轻量级的数据交换格式——初识Json
    CSS 绝对定位
    前台小模块CSS布局代码
    XML常用类(淘宝API)
    表单form
    js 分页
  • 原文地址:https://www.cnblogs.com/shenq/p/4924691.html
Copyright © 2011-2022 走看看