javascript - 如何将内容加载到导航栏上的节元素中单击

Question

您好，我想让网页的内容在点击导航栏时更新。以下是主要问题:

(1) 主页已加载，但当我切换导航时，它的部分内容变为空白。

(2) 当我在主页选项卡上单击返回时，内容会出现，但 MathJax CDN(此处未包含)不会重新加载。

(3) 抱歉没有 JSFiddle。不知道如何在保持我的站点路径私有(private)的同时复制“a href ...”。

最好使用 Ajax，这样我就不必在用户访问主页时加载网站的全部内容。但是，您提供的任何解决方案都很棒!谢谢

$('ul.nav li a').on('click', function(e) { // User clicks nav link
  e.preventDefault(); // Stop loading new link
  var url = this.href; // Get value of href

  $('li.active').removeClass('active'); // Clear current indicator
  $(this).addClass('active'); // New current indicator

  $('div#container').remove(); // Remove old content
  $('#content').load(url + ' #container').hide().fadeIn('slow'); // New content
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Appreciate your effort</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="MYURL/home.html">Home</a>
        </li>
        <li class=""><a href="MYURL/producer.html"> Producer</a>
        </li>
        <li class=""><a href="MYURL/science.html">Science</a>
        </li>
        <li class=""><a href="MYURL/blog.html">Blog</a>
        </li>
        <li class=""><a href="MYURL/mission.html">Our Mission</a>
        </li>
        <li class=""><a href="MYURL/Contact.html">Contact</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

<section id="content">
  <div id="container">
    <h1>
              Home PAGE
              </h1>
  </div>
</section>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

您可以使用 :target 伪类在内容之间切换。

基本上，您隐藏新内容并在用户单击您的菜单项时显示它。

.content--new {
  display: none;
}
#section:target .content--old {
  display: none;
}
#section:target .content--new {
  display: block;
}

<nav>
  <ul>
    <li>
      <a href="#section">Section</a>
    </li>
  </ul>
</nav>

<section id="section">
  <p class="content content--old">
    Old Content
  </p>
  <p class="content content--new">
    New Content
  </p>
</section>

---

如果你想在点击另一个菜单项后继续显示这个新内容，你可以向容器添加一个类来做同样的 :target 。

---

编辑:

您可以使用 .one() jQuery 方法附加一个事件处理程序，一旦用户单击菜单项，该事件处理程序将执行 AJAX 调用，此操作只会执行一次，这就是为什么我们正在使用 one() 而不是 on()。

在演示中，一个属性用于获取 ajax 调用的 url。

HTML:

<nav>
  <ul>
    <li>
      <a class="menu__item" href="#section" data-url="/echo/html/">Section</a>
    </li>
  </ul>
</nav>

<section id="section">
  <div class="content content--old">
    Old Content
  </div>
  <div class="content content--new"></div>
</section>

CSS:

.content--new {
  display: none;
}

#section:target .content--old {
  display: none;
}

#section:target .content--new {
  display: block;
}

JS:

$(document).ready(function(e) {

  $(".menu__item").one("click", function(e) {

    var sectionUrl = $(this).attr("data-url");
    var callMethod = "POST";
    var dataHtml = "<h1>New Content</h1>";
    /*You can add a loader function here;*/

    $.ajax({
      url: sectionUrl,
      type: callMethod,
      cache: false,
      data: {
        'html': dataHtml
      },
      dataType: 'html',
      success: function(htmlReturned) {
        $(".content--new").html(htmlReturned);
        alert("This will only be executed once");
        /* Remove Loader */
      }
    });

  });

});

---

JSFIDDLE

---

注意事项:

• :target 伪类仍在使用，但您可以随时替换 旧内容 html 而不是将其添加到新内容 容器。
• 演示中使用的数据只是在那里生成的字符串，但您将使用 AJAX 响应。