JavaScript 如何创建横向和纵向选项卡

在本文中，我们将使用JavaScript创建横向和纵向选项卡。

选项卡可用于以有组织的方式在单个页面上显示大量内容。我们可以使用HTML、CSS和JavaScript来设计单页面选项卡。使用HTML元素来设计选项卡的结构和段落中的内容。使用CSS进行样式设置。每个选项卡按钮的点击将显示其相应的内容。这是通过JavaScript实现的。

横向选项卡

以下代码演示了具有选项卡和其内容的简单HTML结构。每个选项卡按钮的点击调用在下面的“script.js”文件中实现的displayContent()方法。

示例： 下面的示例展示了创建横向选项卡。

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
</head> 
  
<body> 
    <h2 style="color:green"> 
        GeeksforGeeks Horizontal tabs 
    </h2> 
  
    <!-- Link to each tab with onclick event -->
    <div id="tabsDiv"> 
        <button class="linkClass" onclick= 
            "displayContent(event, 'interview')"> 
            Interview 
        </button> 
  
        <button class="linkClass" onclick= 
            "displayContent(event, 'practice')"> 
            Practice 
        </button> 
  
        <button class="linkClass" onclick= 
            "displayContent(event, 'python')"> 
            Python 
        </button> 
  
        <button class="linkClass" onclick= 
            "displayContent(event, 'algorithms')"> 
            Algorithms 
        </button> 
  
        <button class="linkClass" onclick= 
            "displayContent(event, 'machine')"> 
            Machine Learning 
        </button> 
    </div> 
  
    <!-- Content for each HTML tab  -->
    <div id="interview" class="contentClass"> 
        <h3>Interview</h3> 
  
        <p> 
            Also, in Asymptotic analysis, we always 
            talk about input sizes larger than a 
            constant value. It might be possible 
            that those large inputs are never given 
            to your software and an algorithm which is 
            asymptotically slower, always performs 
            better for your particular situation. 
            So, you may end up choosing an algorithm 
            that is Asymptotically slower but faster 
            for your software. 
        </p> 
  
    </div> 
  
    <div id="practice" class="contentClass"> 
        <h3>Practice</h3> 
  
        <p> 
            Asymptotic Analysis is the big idea 
            that handles above issues in analyzing 
            algorithms. In Asymptotic Analysis, 
            we evaluate the performance of an  
            algorithm in terms of input size (we  
            don’t measure the actual running time). 
            We calculate, how does the time 
            (or space) taken by an algorithm 
            increases with the input size. 
        </p> 
  
    </div> 
  
    <div id="python" class="contentClass"> 
        <h3>Python</h3> 
  
        <p> 
            Python is a high-level, general-purpose 
            and a very popular programming language. 
            Python programming language (latest Python 3) 
            is being used in web development, Machine 
            Learning applications, along with all 
            cutting edge technology in Software Industry. 
            Python Programming Language is very well 
            suited for Beginners, also for experienced 
            programmers with other programming languages 
            like C++ and Java. 
        </p> 
    </div> 
  
    <div id="algorithms" class="contentClass"> 
        <h3>Greedy Algorithms</h3> 
  
        <p> 
            Greedy is an algorithmic paradigm that 
            builds up a solution piece by piece, 
            always choosing the next piece that 
            offers the most obvious and immediate 
            benefit. So the problems where 
            choosing locally optimal also 
            leads to global solution are 
            best fit for Greedy. 
        </p> 
    </div> 
  
    <div id="machine" class="contentClass"> 
        <h3>Machine Learning</h3> 
  
        <p> 
            Machine Learning is the field of 
            study that gives computers the capability 
            to learn without being explicitly 
            programmed. ML is one of the most 
            exciting technologies that one 
            would have ever come across. 
            As it is evident from the name, 
            it gives the computer that makes 
            it more similar to humans: 
            The ability to learn. Machine learning 
            is actively being used today, 
            perhaps in many more places than 
            one would expect. 
        </p> 
    </div> 
</body> 
  
</html>

CSS代码

h3 { 
    text-align: left; 
} 
  
/* Button to open the content */
.linkclass { 
    float: left; 
    cursor: pointer; 
    padding: 10px 15px 10px 10px; 
    background-color: light-grey; 
} 
  
/* Button styling on mouse hover */
#tabsDiv a:hover { 
    color: black; 
    background-color: #e9e9e9; 
    font-size: 16px; 
} 
  
/* Change the color of the button */
button.active { 
    background-color: #c0c0c0; 
} 
  
/* Content for button tabs*/
.contentClass { 
    display: none; 
    padding: 10px 16px; 
    border: 2px solid #c0c0c0; 
}

JavaScript代码

function displayContent(event, contentNameID) { 
  
    let content = 
        document.getElementsByClassName("contentClass"); 
    let totalCount = content.length; 
  
    // Loop through the content class 
    // and hide the tabs first 
    for (let count = 0; 
        count < totalCount; count++) { 
        content[count].style.display = "none"; 
    } 
  
    let links = 
        document.getElementsByClassName("linkClass"); 
    totalLinks = links.length; 
  
    // Loop through the links and 
    // remove the active class 
    for (let count = 0; 
        count < totalLinks; count++) { 
        links[count].classList.remove("active"); 
    } 
  
    // Display the current tab 
    document.getElementById(contentNameID) 
        .style.display = "block"; 
  
    // Add the active class to the current tab 
    event.currentTarget.classList.add("active"); 
}

输出：

JavaScript 如何创建横向和纵向选项卡

垂直选项卡

可以通过改变HTML结构和替换垂直选项卡设计所使用的CSS样式表来使选项卡垂直。以下代码演示了垂直选项卡的示例。

示例： 此示例显示了创建垂直选项卡的方法。

<body> 
    <h2 style="color:green"> 
        GeeksforGeeks Vertical tabs 
    </h2> 
  
    <div id="tabsDiv"> 
        <div id="interview" class="contentClass"> 
            <h3>Interview</h3> 
  
            <p> 
                Also, in Asymptotic analysis, 
                we always talk about input sizes larger 
                than a constant value. It might 
                be possible that those large inputs 
                are never given to your software and 
                an algorithm which is asymptotically 
                slower, always performs better for 
                your particular situation. So, you 
                may end up choosing an algorithm that 
                is Asymptotically slower but faster 
                for your software. 
            </p> 
        </div> 
  
        <div id="practice" class="contentClass"> 
            <h3>Practice</h3> 
  
            <p> 
                Asymptotic Analysis is the big idea 
                that handles above issues in analyzing 
                algorithms. In Asymptotic Analysis, we 
                evaluate the performance of an algorithm 
                in terms of input size (we don’t measure 
                the actual running time). We calculate, 
                how does the time (or space) taken by 
                an algorithm increases with 
                the input size. 
            </p> 
        </div> 
  
        <div id="python" class="contentClass"> 
            <h3>Python</h3> 
  
            <p> 
                Python is a high-level, general-purpose 
                and a very popular programming language. 
                Python programming language (latest Python 3) 
                is being used in web development, Machine 
                Learning applications, along with all 
                cutting edge technology in Software Industry. 
                Python Programming Language is very 
                well suited for Beginners, also for 
                experienced programmers with other 
                programming languages like C++ and Java. 
            </p> 
        </div> 
  
        <div id="algorithms" class="contentClass"> 
            <h3>Greedy Algorithms</h3> 
  
            <p> 
                Greedy is an algorithmic paradigm 
                that builds up a solution piece by 
                piece,always choosing the next piece 
                that offers the most obvious and 
                immediate benefit. So the problems 
                where choosing locally optimal also 
                leads to global solution are best 
                fit for Greedy. 
            </p> 
        </div> 
  
        <ul class="ulClass" style="height:300px"> 
            <li style="list-style-type:none;"> 
                <button class="linkClass" onclick= 
                    "displayContent(event, 'interview')"> 
                    Interview 
                </button> 
            </li> 
              
            <li style="list-style-type:none;"> 
                <button class="linkClass" onclick= 
                    "displayContent(event, 'practice')"> 
                    Practice 
                </button> 
            </li> 
  
            <li style="list-style-type:none;"> 
                <button class="linkClass" onclick= 
                    "displayContent(event, 'python')"> 
                    Python 
                </button> 
            </li> 
  
            <li style="list-style-type:none;"> 
                <button class="linkClass" onclick= 
                    "displayContent(event, 'algorithms')"> 
                    Algorithms 
                </button> 
            </li> 
        </ul> 
    </div> 
</body> 
  
</html>

CSS代码

* { 
    box-sizing: border-box; 
} 
  
#tabsDiv { 
    height: 300px; 
    border: 2px solid #c0c0c0; 
} 
  
#tabsDiv ul { 
    height: 300px; 
    padding: 0px 5px; 
} 
  
#tabsDiv li { 
    width: 15%; 
    height: 60px; 
} 
  
#tabsDiv button { 
    float: left; 
    border: 1px solid #c0c0c0; 
    background-color: #f1f0f4; 
} 
  
/* Button to open the content */
#tabsDiv button { 
    display: block; 
    background-color: inherit; 
    color: black; 
    padding: 25px 15px; 
    width: 100%; 
    text-align: left; 
    cursor: pointer; 
} 
  
/* Button styling on mouse hover */
#tabsDiv button:hover { 
    background-color: #d1d1d1; 
    color: lime; 
} 
  
#tabsDiv button.active { 
    background-color: #c0c0c0; 
} 
  
/* Content for tabs*/
.contentClass { 
    display: none; 
    position: absolute; 
    left: 18%; 
    padding: 0px 15px; 
    width: 70%; 
    border-style: none; 
    height: 300px; 
}

Javascript代码

function displayContent(event, contentNameID) { 
  
    let content = 
        document.getElementsByClassName("contentClass"); 
    let totalCount = content.length; 
  
    // Loop through the content class 
    // and hide the tabs first 
    for (let count = 0; 
        count < totalCount; count++) { 
        content[count].style.display = "none"; 
    } 
  
    let links = 
        document.getElementsByClassName("linkClass"); 
    totalLinks = links.length; 
  
    // Loop through the links and 
    // remove the active class 
    for (let count = 0; 
        count < totalLinks; count++) { 
        links[count].classList.remove("active"); 
    } 
  
    // Display the current tab 
    document.getElementById(contentNameID) 
        .style.display = "block"; 
  
    // Add the active class to the current tab 
    event.currentTarget.classList.add("active"); 
}