jq方法写选项卡的基本原理以及三种方法

使用jq写选项卡,告别了繁琐的循环以及命名规范

基本原理:

1.当某一个btn被选中时,将这个btn的背景颜色设为橘色,其余兄弟btn背景颜色设为空(none)

2.如果子div与btn的索引相同,就将这个div显示而其他兄弟div隐藏

1).css函数参数2的回调函数方法;

2).原生get方法再转jq对象 再进行设置的方法

3).当前div使用show()方法,其余兄弟div使用hide()方法

关键字:get()  siblings()  show()  hide()  css()

html页:

4个btn,4个div

<div id="wrap">
        <button>btn1</button>
        <button>btn2</button>
        <button>btn3</button>
        <button>btn4</button>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

css页:

大盒子当前无样式,在实际开发中需要指定其宽高;第一个btn背景色为橘黄色;第一个子项div显示,其余兄弟div隐藏

#wrap div {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            display: none;
        }
        
        #wrap div:nth-of-type(1) {
            display: block;
            /* 第一个子项div显示 */
        }
        
        #wrap button:nth-of-type(1) {
            background: orange;
            /* 第一个btn背景色为橘黄色; */
        }

jquery页:

1)首先给btn绑定事件

$("#wrap button").click(function() {
        //当btn被点击后发生的事件
})

关键字: click();

2) 当btn被点击时,设置当前选中btn颜色为橘色,并且将其他兄弟btn背景色为空:

$(this).css("background", "orange").siblings("button").css("background", "none")

关键字:  $(this);  css();   siblings()

3) 声明一个变量, 这个变量保存了被选中的btn的下标

var $index = $(this).index();

关键字:$index; $(this);index();

// 1:找到所有的子div,并且设置css样式,如果某个div的索引与btn的索引相同,就让他显示
                    $("#wrap div").css("display", function(i) {
                        if (i == $index) {
                            return "block";
                        }
                        return "none";
                    })

关键字:css() ; "display" ; i == $index;

b:通过get()方法将子div的索引与当前btn的索引绑定,然后再将这个索引转变成jq对象,再使用jq方法将对应div显示

$($("#wrap div").get($(this).index())).css("display", "block").siblings("div").css("display", "none")

由于get方法是js原生方法,所以应将其转成jq对象才能使用jq方法

关键字: $()  ; $(this).index; get();css();siblings()

c:通过当前btn的索引绑定div的索引,进而将这个索引对应的div显示show(),并将其余的div兄弟元素隐藏hide()

$("#wrap div").eq($(this).index()).show().siblings("div").hide();

关键字:eq();$(this).index();show();hide()

以下是全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡jQuery</title>
    <script src="./jquery/jquery.min.js"></script>
    <style>
        #wrap div {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            display: none;
        }
        
        #wrap div:nth-of-type(1) {
            display: block;
            /* 第一个子项div显示 */
        }
        
        #wrap button:nth-of-type(1) {
            background: orange;
            /* 第一个btn背景色为橘黄色; */
        }
    </style>
</head>

<body>
    <!-- 选项卡jQuery -->
    <div id="wrap">
        <button>btn1</button>
        <button>btn2</button>
        <button>btn3</button>
        <button>btn4</button>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <script>
        $(function() {
            // 给button绑定事件
            $("#wrap button").hover(function() {
                $(this).css("background", "orange").siblings("button").css("background", "none")
                var $index = $(this).index()
                    // 1:找到所有的子div,并且设置css样式,如果某个div的索引与btn的索引相同,就让他显示
                $("#wrap div").css("display", function(i) {
                        if (i == $index) {
                            return "block";
                        }
                        return "none";
                    })
                    //  2:通过get方法找到的索引方法是原生方法,要将他们包裹在$()里面
                $($("#wrap div").get($(this).index())).css("display", "block").siblings("div").css("display", "none")
                    // 3.通过当前btn的索引找到div对应的索引并将这个对应索引的div显示show(),并使其他的div兄弟隐藏hide()
                $("#wrap div").eq($(this).index()).show().siblings("div").hide();
            })
        })
    </script>
</body>

</html>

这样,就完成了使用jQuery方法实现选项卡。

以上。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章