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

Question

我有两个导航栏，但一个被隐藏了。

我的目标是在用户单击按钮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>

Answer 1

许多错误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>

Answer 2

我在 JQuery 上为Fiddle工作，在这里，您只需要添加禁用功能即可。

jQuery：

$(document).ready(function(){
    $('#nav2').hide();
});

$('#ShowNav2-1').click(function(){
    $('#nav2').hide();
    $('#nav1').show();
});
$('#ShowNav1-2').click(function(){
    $('#nav1').hide();
    $('#nav2').show();
});

这是使用纯 JavaScript 解决方案的代码。

  document.getElementById('nav2').style.display = "none";


function ShowDivNav1() {
   document.getElementById('nav2').style.display = "none";
   document.getElementById('nav1').style.display = "block"; 
   document.getElementById('ShowNav1').disabled = true;
   document.getElementById('ShowNav2').disabled = false;
}
   
function ShowDivNav2() {
   document.getElementById('nav1').style.display = "none";
   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">News1</a></li>
        <li><a href="#contact">Contact1</a></li>
        <li><a href="#about">About1</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">News2</a></li>
        <li><a href="#contact">Contact2</a></li>
        <li><a href="#about">About2</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>