zoukankan      html  css  js  c++  java
  • JQueryTab栏切换(important!)

    第一个案例:

      淘宝服饰精品案例

      

    案例分析:

      1、核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏

      2、需要得到当前小li的索引号,就可以显示对应索引号的图片

      3、jQuery得到当前元素索引号$(this).index();

      4、中间对应的图片,可以通过eq(index)方法去选择(eq(index)方法就是在已经选中的元素中再选取符合index索引号的一个元素)

        eq(index)具体方法请查阅:https://www.cnblogs.com/webpon/p/13468903.htmlhttps://www.runoob.com/jquery/traversing-eq.html

      5、显示元素show() 隐藏元素hide();

    实现代码:

    <!DOCTYPE html>
    <html>
    
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-size: 12px;
            }
            
            ul {
                list-style: none;
            }
            
            a {
                text-decoration: none;
            }
            
            .wrapper {
                width: 250px;
                height: 248px;
                margin: 100px auto 0;
                border: 1px solid pink;
                border-right: 0;
                overflow: hidden;
            }
            
            #left,
            #content {
                float: left;
            }
            
            #left li {
                background: url(images/lili.jpg) repeat-x;
            }
            
            #left li a {
                display: block;
                width: 48px;
                height: 27px;
                border-bottom: 1px solid pink;
                line-height: 27px;
                text-align: center;
                color: black;
            }
            
            #left li a:hover {
                background-image: url(images/abg(1).gif);
            }
            
            #content {
                border-left: 1px solid pink;
                border-right: 1px solid pink;
            }
        </style>
        <script src="js/jquery.min.js"></script>
        <script>
            $(function() {
                // 1. 鼠标经过左侧的小li 
                $("#left li").mouseover(function() {
                    // 2. 得到当前小li 的索引号
                    var index = $(this).index();
                    console.log(index);
                    // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
                    $("#content div").eq(index).show();
                    // 4. 让其余的图片(就是其他的兄弟)隐藏起来
                    $("#content div").eq(index).siblings().hide();
                    // 链式编程
                    // $("#content div").eq(index).show().siblings().hide();
    
                })
            })
        </script>
    </head>
    
    <body>
        <div class="wrapper">
            <ul id="left">
                <li><a href="#">女靴</a></li>
                <li><a href="#">雪地靴</a></li>
                <li><a href="#">冬裙</a></li>
                <li><a href="#">呢大衣</a></li>
                <li><a href="#">毛衣</a></li>
                <li><a href="#">棉服</a></li>
                <li><a href="#">女裤</a></li>
                <li><a href="#">羽绒服</a></li>
                <li><a href="#">牛仔裤</a></li>
            </ul>
            <div id="content">
                <div>
                    <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
                </div>
                <div>
                    <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
                </div>
    
            </div>
    
    
        </div>
    </body>
    
    </html>

     第二个案例:

      tab栏切换

      

      案例分析:

        1、点击上部的li,当前li添加current类,其余兄弟移除类。

        2、点击的同时,得到当前li的索引号

        3、让下部里面相应索引号的item显示,其余的item隐藏

       

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="js/jquery.min.js"></script>
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style-type: none;
            }
            
            .tab {
                width: 978px;
                margin: 100px auto;
            }
            
            .tab_list {
                height: 39px;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            
            .tab_list li {
                float: left;
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
            }
            
            .tab_list .current {
                background-color: #c81623;
                color: #fff;
            }
            
            .item_info {
                padding: 20px 0 0 20px;
            }
            
            .item {
                display: none;
            }
        </style>
        <!-- <script src="jquery.min.js"></script> -->
    </head>
    
    <body>
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价(50000)</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="tab_con">
                <div class="item" style="display: block;">
                    商品介绍模块内容
                </div>
                <div class="item">
                    规格与包装模块内容
                </div>
                <div class="item">
                    售后保障模块内容
                </div>
                <div class="item">
                    商品评价(50000)模块内容
                </div>
                <div class="item">
                    手机社区模块内容
                </div>
    
            </div>
        </div>
        <script>
            $(function() {
                $('li').click(function() {
                    $(this).addClass("current").siblings().removeClass("current");
                    var index = $(this).index();
                    $('.item').eq(index).show();
                    $('.item').eq(index).siblings().hide();
                })
            })
        </script>
    </body>
    
    </html>
  • 相关阅读:
    形象理解ERP(转)
    禁用windows server 2008 域密码复杂性要求策略
    How to adding find,filter,remove filter on display method Form
    Windows Server 2008 R2激活工具
    How to using bat command running VS development SSRS report
    Creating Your First Mac AppGetting Started
    Creating Your First Mac AppAdding a Track Object 添加一个 Track 对象
    Creating Your First Mac AppImplementing Action Methods 实现动作方法
    Creating Your First Mac AppReviewing the Code 审查代码
    Creating Your First Mac AppConfiguring the window 设置窗口
  • 原文地址:https://www.cnblogs.com/webpon/p/13469152.html
Copyright © 2011-2022 走看看