Onclick查找href并在div中生成新内容

Question

Hey so I have a navigation menu and what I want to do is show/hide the content inside the div based on which link in the navigation you click. I want the jQuery/javascript to find the href=#panel21 and use the #panel21 to show that div of content.

I am doing this right now by adding a class to each a tag and calling each one in a separate jQuery function. But as I add more links to the nav this is going to get out of hand, so I need to simplify. My current project can be found on Codepen

And here is the snippet

 // 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> 

Answer 1

I removed all of the click handlers and added in the end:

function handleMenuClick(e){
  e.stopPropagation();
  $('.newContent').html($($(this).attr("href")).html());
}
$("ul.mobile-header-nav").on("click", ".subnav li a",handleMenuClick);

this way you have event delegation even for dynamically created content

http://codepen.io/Saar/pen/Vvradp

Answer 2

You don't need a different class for each. Try this:

$('.panel').click(function(){
$('.newContent').html($($(this).attr('id')+'1').html());});

and just use class panel for all of them and use what you now have as class as id.

event better to use the id instead of the class for the target:

$('.panel').click(function(){
$('#linkContent').html($($(this).attr('id')+'1').html());});

Answer 3

other way is : https://jsfiddle.net/mig1098/1yr4zthe/

$('.mobile-header-nav li a[class^="panel"]').click(function(){
    $('.newContent').html($($(this).attr('href')).html());
});

Answer 4

Use single function in click as:

$('.panel1, .panel2, .panel3, .panel4, .panel5').click(function(){
    var id = $(this).attr("class") + "1";
    $('.newContent').html($(id).html());
});

 // 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, .panel2, .panel3, .panel4, .panel5').click(function(){ var id = $(this).attr("class") + "1"; $('.newContent').html($("#" + id).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>