Question

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

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

（2）当我单击主页选项卡上的内容时，会显示内容，但MathJax CDN（此处未包含）不会重新加载。

（3）抱歉没有JSFiddle。不知道如何复制＆＃39; a href ...＆＃39;同时保持我的网站路径私密。

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

＆＃13;

$('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
});

＆＃13;

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

＆＃13;

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调用，此操作将仅执行一次，这就是我们使用{{1}的原因而不是one()。

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

<强> HTML：

on()

<强> CSS：

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

<强> JS：

.content--new {
  display: none;
}

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

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

JSFIDDLE

备注：

$(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 */ } }); }); });伪类仍在使用，但您始终可以替换旧内容html而不是将其添加到新内容容器

演示中使用的数据只是在那里生成的字符串，但您将使用AJAX响应。

如何在Navbar单击时将内容加载到Section元素中

1 个答案:

编辑：

JSFIDDLE