zoukankan      html  css  js  c++  java
  • 简单切换卡 (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>
  • 相关阅读:
    mysql uodate 报错 You can't specify target table '**' for update in FROM clause
    设置mysql InnoDB存储引擎下取消自动提交事务
    SQL插入数据--数据中的某一列来自本表中的数据
    服务器部署静态页面
    json 和 jsonp
    Git 回滚
    java 自定义注解
    java BlockingQueque的多种实现
    java 多线程之ReentrantLock与condition
    storm 架构原理
  • 原文地址:https://www.cnblogs.com/qianqianj/p/12844518.html
Copyright © 2011-2022 走看看