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>