Achieve the following effects

Knowledge points used

HTML – structure

  • You need to implement a TAB that has a lot of modules in it, so you first need a div tag to wrap it around
  • The options section of the TAB uses lists to implement UL-LI
  • The contents of the tabs can be implemented as divs, one for each content
<! - quickly generate the following shortcut key code div. The main > (ul > li * 3 $} {option) + div * 3 content ${} -- > < div class ="main" id="main"> < ul > < li > option 1 < / li > < li > option 2 < / li > < li > option 3 < / li > < / ul > < div > content 1 < / div > < div > content 2 < / div > < div > content 3 < / div > < / div >Copy the code

CSS – style

  • The first step in the style is to clear the default style, usually by importing the clear style sheet. If there is no style sheet, clear the default tags used in this demo.
  • The big box on the outside needs to be centered — it is a block-level element, so the block-level element uses the margin property as its center, provided it is given a width.
  • The style required for the TAB section
    • First, the list is a block element, which is exclusive to a row, but we are implementing it on the same row, so we need to convert (float is also possible).
    • You need to give each TAB a fixed height and width so that the line height equals the height to center the text vertically. The content is horizontally centered, and the text is centered with the text-align attribute.
    • Each TAB needs a border;
    • When you border the following content, you have both the TAB border and the content border, so you can use a relative position to move the TAB down by 1 pixel, with a positive top meaning down;
  • Content: Similar to a TAB, but without adding width, it can inherit the width of its parent element. If the option card is not selected, the content portion is hidden. Use the display: None method here, because hiding does not hold space.
  • When clicked: the TAB changes color and the content changes color and displays
       * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .main {
            width: 500px;
            margin: 20px auto;
        }

        .main li {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid # 333;
            margin-right: 10px;
            position: relative;
            top: 1px;
            cursor: pointer;
        }

        .main div {
            height: 300px;
            line-height: 300px;
            text-align: center;
            border: 1px solid # 333;
            display: none;
        }

        .main li.choose {
            background-color: steelblue;
            border-bottom-color: steelblue;
        }

        .main div.choose {
            background-color: steelblue;
            display: block;
        }
Copy the code

Js part — Behavior

  • The first step is to get the element you want to operate on
  • Action: Click in the CSS section by adding the class name, so when clicking on that TAB, add that class name to the TAB
    • Loop through each TAB to add click events to it
    • When clicking, you first need to clear all the class names, and then add the class to the clicked TAB and the corresponding content
<script>
        var main = document.getElementById("main");
        var list = main.getElementsByTagName("li");
        var con = main.getElementsByTagName("div");

        for(var i = 0; i<list.length; I ++){// The document is executed from the top down, and the user can only click after loading all the code in the page, including JS, so when the user clicks, I is already 3, so here I record the value of each loop; list[i].index = i; list[i].onclick =function() {for(var i = 0; i<list.length; i++){ list[i].className ="";
                    con[i].className = "";
                }
                var index = this.index;
                list[index].className = "choose";
                con[index].className = "choose";
            }
        }
    </script>
Copy the code

The difficulty of the implementation of the TAB is that the value of I is already the maximum value when the mouse clicks, so it needs to use a value to record.