• 简单切换卡 (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>
  • 相关阅读:
    软工实践个人总结
    Beta版本演示
    Beta 5
    Beta 4
    Beta 3
    Beta 2
    2020系统综合实践 期末大作业 02组
    2020系统综合实践 第7次实践作业 2组
    2020系统综合实践 第6次实践作业 2组
    2020系统综合实践 第5次实践作业
  • 原文地址:https://www.cnblogs.com/qianqianj/p/12844518.html
Copyright © 2020-2023  润新知