简单切换卡 (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>
原文地址:https://www.cnblogs.com/qianqianj/p/12844518.html