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

Question

嘿，所以我有一个导航菜单，我想做的是 show/hide div 中的内容，基于您在导航中单击的内容 link。我希望 jQuery/javascript 找到 href=#panel21 并使用 #panel21 显示 div 的内容。

我现在正在这样做，方法是向每个标签添加一个 class 并在单独的 jQuery 函数中调用每个标签。但是当我向导航中添加更多 links 时，这将失控，因此我需要简化。我当前的项目可以在 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

您不需要为每个不同的 class。试试这个：

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

并且只对所有这些使用 class panel 并使用你现在拥有的 class 作为 id。

事件最好使用 id 而不是 class 作为目标：

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

Answer 2

在点击中使用单一功能为：

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

Answer 3

我删除了所有点击处理程序并在最后添加：

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 4

另一种方式是：https://jsfiddle.net/mig1098/1yr4zthe/

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

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

Onclick find href and generate new content in div

javascript

jquery

onclick

find