jQuery中的排他思想 —— 实现淘宝精品服饰选项卡效果

排他思想用大白话说就是多选一，只选中被选中的那个，其余的不选中。用原生js实现排他，须要循环遍历，比较麻烦。jQuery里有隐式迭代，就不须要咱们再去循环绑定事件循环遍历元素了，简单了许多。

首先了解jQuery的三个方法，隐藏元素、显示元素以及获取元素索引号。

hide()  隐藏元素

show()  显示元素

index()  返回元素索引号

ok，先来个简单的排他案例呗，依然是选择按钮的案例。一样的效果，代码量减小了不少。

jQuery代码：

// 排他
        $(function () {
            // 对按钮添加事件 这里是隐式迭代：为每一个按钮绑定了点击事件
            $("button").click(function () {
                // 点击变色
                // 排除除了当前被点击的其余按钮：就是被点击按钮的兄弟元素
                $(this).siblings().css("background", "");
                // 留下本身
                $(this).css("background", "pink");
            })
        })

这里须要注意的是，干掉其余人，就是选中被点击按钮的其余兄弟元素，设置他们的背景色为空，再让本身变色。排他在jQuery里就三行代码，是否是爽到飞起。哈哈哈哈哈。jQuery里的鼠标事件与原生JavaScript事件名称是同样的，正常写就行了。

 

淘宝案例

下面就来淘宝选项卡了哈。当鼠标移入不一样的选项时，右侧显示不一样的图片来对应。先看下效果图

主要的思想就是排他，还用到了对象元素的显示和隐藏。left是左侧的小选项可卡，content是右侧的图片部分

jQuery代码：

$(function () {
            // 鼠标通过li时 显示对应的图片
            $("#left li").mouseenter(function () {
                // 得到通过li的索引号
                var index = $(this).index();
                console.log(index);
                // 让选中的index图片显示 其余隐藏
                $("#content div").eq(index).show();
                $("#content div").eq(index).siblings().hide();
            })
        })

 

结构和样式

<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.gif);
        }

        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>



    <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>

 

 

最近懈怠了，没有以前学习时间长了，可是仍是在保持着学习进度的。加油加油加油！！！！！

学习不迷路。。。