简单切换卡 （siblings 用法1）

siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。

siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。

jQuery 的遍历方法siblings()

$("给定元素").siblings(".selected")    //如果同级返回有其他的元素是不需要操作的，需要给定要操作的元素

其作用是筛选给定的同胞同类元素（不包括给定元素本身）

例子：网页选项栏

当点击任意一个选项卡是，另外选项卡就会改变样式，其内容也会隐藏。

 <style>

        .qieh_title span {

            display: inline-block;

             100px;

            height: 50px;

        }

        .qieh_cont ul {

            display: none;

            float: left;

        }

        .one {

            color: red;

        }

    </style>

    <div class="qieh">

        <div class="qieh_title">

            <span class="one">点击切换1</span>

            <span>点击切换2</span>

        </div>

        <div class="qieh_cont">

            <ul style="display: block;">

                <li>切换1</li>

                <li>切换1</li>

                <li>切换1</li>

            </ul>

            <ul>

                <li>切换2</li>

                <li>切换2</li>

                <li>切换2</li>

            </ul>

        </div>

    </div>

    <script>

        $(function () {

            $(".qieh_title span").each(function (index) {

                $(this).click(function () {

                    $(".qieh_title .one").removeClass("one"); // 移除之前的样式

                    $(this).addClass("one"); //增加当前选择的样式

                    $(".qieh_cont ul").eq(index).show().siblings().hide();

                });

            })

        })

    </script>