Onclick查找href並在div中生成新內容

Question

嘿，我有一個導航菜單，我想要做的是根據您單擊導航中的哪個鏈接來顯示/隱藏div中的內容。 我希望jQuery / Javascript找到href =＃panel21並使用＃panel21來顯示該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> 

Answer 1

我刪除了所有點擊處理程序，最后添加了：

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

這樣，您甚至可以針對動態創建的內容進行事件委托

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

Answer 2

您不需要為每個類分配不同的類。 嘗試這個：

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

並使用所有類的panel ，並使用您現在作為id的類。

事件最好使用id代替目標類：

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

Answer 3

其他方式是： https : //jsfiddle.net/mig1098/1yr4zthe/

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

Answer 4

單擊中使用單個功能為：

$('.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>