时间戳

首页 > 解决方案 > JS 或 jQuery。单击按钮时显示不同的导航

javascript - JS 或 jQuery。单击按钮时显示不同的导航

问题描述

我有两个导航栏，但一个是隐藏的。

我的目标是在用户单击按钮时navbar1显示一个导航栏，并在用户单击第二个按钮时显示另一个导航栏。

我该怎么做 ？

我在两个导航之间有不同的子导航。

我的代码：

function showDivNav1() {
   document.getElementById('Nav1').style.display = "block";
   document.getElementById('ShowNav1').disabled = true;
   document.getElementById('ShowNav2').disabled = false;
}
   
function showDivNav2() {
   document.getElementById('Nav2').style.display = "block";
   document.getElementById('ShowNav1').disabled = true;
   document.getElementById('ShowNav2').disabled = false;
}
body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
<div id="nav1">
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
        <li style="float:right"><a id="ShowNav1" type="button" onclick="ShowDivNav1()">Nav1</a></li>
        <li style="float:right"><a id="ShowNav2" type="button" onclick="ShowDivNav1()">Nav2</a></li>
    </ul>
</div>
<div id="nav2">
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
        <li style="float:right"><a id="ShowNav1" type="button" onclick="ShowDivNav2()">Nav1</a></li>
        <li style="float:right"><a id="ShowNav2" type="button" onclick="ShowDivNav2()">Nav2</a></li>
    </ul>
</div>

<div style="padding:20px;margin-top:30px;background-color:white;height:1500px;">
    <h1>Barre de navigation accrocher au haut de la page</h1>
    <h2>Defiler la page pour voir l'effet</h2>
    <h2>La navigation restera en haut de la page</h2>

    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>

</div>

标签： javascriptjquery

解决方案

许多错误Nav1需要nav1

ShowDivNav2需要showDivNav2...

function showDivNav1() {
   document.getElementById('nav1').style.display = "block";
   document.getElementById('ShowNav1').disabled = true;
   document.getElementById('ShowNav2').disabled = false;
   }
    function showDivNav2() {
   document.getElementById('nav2').style.display = "block";
   document.getElementById('ShowNav1').disabled = true;
   document.getElementById('ShowNav2').disabled = false;
   }
 body {margin:0;}

     ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
    }

    li {
    float: left;
    }

    li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

    li a:hover:not(.active) {
    background-color: #111;
    }

     .active {
    background-color: #4CAF50;
    }
<div id="nav1">
    <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
     <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    <li style="float:right"><a id="ShowNav1" type="button" 
    onclick="showDivNav1()">Nav1</a></li>
     <li style="float:right"><a id="ShowNav2" type="button" 
    onclick="showDivNav2()">Nav2</a></li>
    </ul>
    </div>
     <div id="nav2">
     <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
     <li><a href="#about">About</a></li>
    <li style="float:right"><a id="ShowNav1" type="button" 
    onclick="showDivNav1()">Nav1</a></li>
    <li style="float:right"><a id="ShowNav2" type="button" 
    onclick="showDivNav2()">Nav2</a></li>
    </ul>
     </div>

    <div style="padding:20px;margin-top:30px;background- 
    color:white;height:1500px;">
    <h1>Barre de navigation accrocher au haut de la page</h1>
    <h2>Defiler la page pour voir l'effet</h2>
    <h2>La navigation restera en haut de la page</h2>

    <p>Un petit de peu de texte, un petit peu de texte</p>
    <p>Un petit de peu de texte, un petit peu de texte</p>
     <p>Un petit de peu de texte, un petit peu de texte</p>
     <p>Un petit de peu de texte, un petit peu de texte</p>
     <p>Un petit de peu de texte, un petit peu de texte</p>
     <p>Un petit de peu de texte, un petit peu de texte</p>
      <p>Un petit de peu de texte, un petit peu de texte</p>
     <p>Un petit de peu de texte, un petit peu de texte</p>
     <p>Un petit de peu de texte, un petit peu de texte</p>
     <p>Un petit de peu de texte, un petit peu de texte</p>
     <p>Un petit de peu de texte, un petit peu de texte</p>
     <p>Un petit de peu de texte, un petit peu de texte</p>

    </div>

推荐阅读