0
嘿所以我有一個導航菜單，我想要做的是根據您點擊的導航中的哪個鏈接來顯示/隱藏div內的內容。我想讓jQuery/javascript找到href =＃panel21並使用＃panel21來顯示div的內容。Onclick找到href並在div中生成新內容
我現在正在通過向每個標記添加一個類並在單獨的jQuery函數中調用每個標記來完成此操作。但是，當我添加更多的導航鏈接時，這將會失控，所以我需要簡化。我目前的項目能夠Codepen
發現這裏是片段
// open mobile menu
$('.js-toggle-menu').click(function(e){
$('.mobile-header-nav').slideToggle();
$(this).toggleClass('open');
});
$('.sub-toggle').click(function(e){
$(this).next('.subnav').slideToggle();
$(this).toggleClass('open');
});
$('.panel1').click(function(){
$('.newContent').html($('#panel11').html());});
$('.panel2').click(function(){
$('.newContent').html($('#panel21').html());});
$('.panel3').click(function(){
$('.newContent').html($('#panel31').html());});
$('.panel4').click(function(){
$('.newContent').html($('#panel41').html());});
$('.panel5').click(function(){
$('.newContent').html($('#panel51').html());});
* {
box-sizing: border-box;
}
@media (min-width: 768px) {
.mobile-nav-wrap {
/* display: none; */
}
}
.mobile-header-nav {
background-color: #222222;
display: none;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.mobile-header-nav li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-header-nav li a {
color: white;
display: block;
padding: 15px 15px;
text-align: left;
text-decoration: none;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mobile-header-nav li a:hover {
background-color: #2f2f2f;
}
a.mobile-menu-toggle {
padding-left: 50px;
color: #52575f;
text-decoration: none;
background: #eeeff0;
font-size: 3em;
}
.subnav {
display: none;
}
#panel11, #panel21, #panel31, #panel41, #panel51 {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<header>
<nav class="mobile-nav-wrap" role="navigation">
<ul class="mobile-header-nav">
<li>
<a href="#" class="sub-toggle">Overview</a>
<ul class="subnav">
<li><a class="panel1" href="#panel11">Nav Item 1</a></li>
<li><a class="panel2" href="#panel21">Nav Item 2</a></li>
<li><a class="panel3" href="#panel31">Nav Item 3</a></li>
</ul>
</li>
<li><a class="sub-toggle" href="#">Resources</a>
<ul class="subnav">
<li><a class="panel4" href="#panel41">Nav Item 1</a></li>
<li><a class="panel5" href="#panel51">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
</ul>
</li>
<li><a class="sub-toggle" href="#">Service</a>
<ul class="subnav">
<li><a href="#">Nav Item 1</a></li>
<li><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
</ul>
</li>
</ul>
</nav>
<a class="mobile-menu-toggle js-toggle-menu" href="#">
Get Started
</a>
</header>
<div class="mainContent">
<div id="panel11" class="content">
<h2>Panel 1 Content</h2>
<p>Lorem ipsum stuff here</p>
</div>
<div id="panel21" class="content">
<h2>Panel 2 Content</h2>
<p>Lorem ipsum stuff here</p>
</div>
<div id="panel31" class="content">
<h2>Panel 3 Content</h2>
<p>Lorem ipsum stuff here</p>
</div>
<div id="panel41" class="content">
<h2>Panel 4 Content</h2>
<p>Lorem ipsum stuff here</p>
</div>
<div id="panel51" class="content">
<h2>Panel 5 Content</h2>
<p>Lorem ipsum stuff here</p>
</div>
</div>
<div class="newContent" id="linkContent">
<p>The new content will show up here</p>
</div>