The Basic Principle of Writing Tab with jq Method and Three Methods

Using jq to write tabs, farewell to tedious loops and naming conventions

Basic principles:

1. When a btn is selected, set the background color of the btn to orange and the other brothers to none.

2. If the index of the child div is the same as that of btn, this div will be displayed while other brother divs will be hidden.

Callback function method of CSS function parameter 2;

Native get method, jq object and setting method

Currently div uses show() method, while the rest of the brothers div uses hide() method.

Keyword: get() siblings() show() hide() css()

html pages:

Four btns, four div s

 <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 pages:

Large boxes are currently styleless and need to be specified in actual development; the first btn background color is orange; the first sub-item div shows that the rest of the brothers div hidden.

 #wrap div {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            display: none;
        }
        
        #wrap div:nth-of-type(1) {
            display: block;
            /* The first subitem div displays */
        }
        
        #wrap button:nth-of-type(1) {
            background: orange;
            /* The first btn background color is orange. */
        }

jquery pages:

1) First bind events to btn

$("#wrap button").click(function() {
        //Events that occur when btn is clicked
})

Keyword: click();

2) When BTN is clicked, set the current selected BTN color to orange, and empty the background color of other brothers btn:

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

Keyword: $(this); css(); siblings()

3) Declare a variable that holds the subscript of the selected btn

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

Keyword: $index; $(this);index();

 // 1: Find all the subdivs and set the css style. If the index of a div is the same as that of btn, let it be displayed.
                    $("#wrap div").css("display", function(i) {
                        if (i == $index) {
                            return "block";
                        }
                        return "none";
                    })

Keyword: CSS (); "display"; I == $index;

b: Bind the index of the subdiv to the index of the current btn by get(), then convert the index into a jq object, and display the corresponding div by jq method.

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

Since the get method is a native js method, it should be converted to a jq object to use the jq method

Keyword: $(); $(this).index; get();css();siblings().

c: Bind the index of div by the index of the current btn, then show() the corresponding div of the index, and hide the rest of the div sibling elements.

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

Keyword: eq();$(this).index();show();hide()

Here's all the code

<!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>tab 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;
            /* The first subitem div displays */
        }
        
        #wrap button:nth-of-type(1) {
            background: orange;
            /* The first btn background color is orange. */
        }
    </style>
</head>

<body>
    <!-- tab 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() {
            // Binding event to button
            $("#wrap button").hover(function() {
                $(this).css("background", "orange").siblings("button").css("background", "none")
                var $index = $(this).index()
                    // 1: Find all the subdivs and set the css style. If the index of a div is the same as that of btn, let it be displayed.
                $("#wrap div").css("display", function(i) {
                        if (i == $index) {
                            return "block";
                        }
                        return "none";
                    })
                    //  2: The indexing methods found by get method are native methods, wrapped in $().
                $($("#wrap div").get($(this).index())).css("display", "block").siblings("div").css("display", "none")
                    // 3. Find the index corresponding to div by the index of current btn and display show() the div of the corresponding index, and hide() other div brothers.
                $("#wrap div").eq($(this).index()).show().siblings("div").hide();
            })
        })
    </script>
</body>

</html>

This completes the implementation of the tab using the jQuery method.

Above.

Posted by pspcrazy on Fri, 11 Oct 2019 04:48:09 -0700

Programmer Group

The Basic Principle of Writing Tab with jq Method and Three Methods

Hot Keywords