Question

loader.js

$('a').click(function(){
var page = $(this).attr('href');
$("#content").load(page);

return false;
});

<小时/> 的的index.html

<nav>
   <a href="home.html">Home</a>
   <a href="about.html">about</a>
   <a href="contact.html">contact</a>
</nav>

<div id="content">
Content goes here
</div>
<script src="js/loader.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>

通过使用JS代码，所有链接都被加载到div中。

我希望能够将特定链接加载到div中，并使其余链接正常打开。

是否可以通过在我想要加载到div中的JS代码和href链接中添加 id 来实现？或/是否有更好的方法来实现这一目标？

Answer 1

尝试使用$('nav a').click()仅将您的脚本应用于nav部分中的链接..

或者更好地为您想要的链接添加特定的类选择器

脚本：

$('a.page').click(function () {
    var page = $(this).attr('href');
    $("#content").load(page);

    return false;
});

的index.html：

<nav>
    <a class="page" href="home.html">Home</a>
    <a class="page" href="about.html">about</a>
    <a class="page" href="contact.html">contact</a>
</nav>

<div id="content">
    Content goes here
</div>

Answer 2

您只想将一些链接动态加载到您的div中吗？

您可以在应该加载到div中的链接中添加一个类，只有在单击此类的链接时才会触发您的函数。

请注意，您还可以使用属性。（不是id，因为id应该是唯一的）

＆＃13;

$('a.dynamic-loading').click(function(){
var page = $(this).attr('href');
$("#content").load(page);

return false;
});

＆＃13;

<nav>
   <a href="home.html">Home</a>
   <a href="about.html" class="dynamic-loading">about</a>
   <a href="contact.html">contact</a>
</nav>

<div id="content">
Content goes here
</div>

＆＃13;

希望它有所帮助，干杯。

Answer 3

您可以尝试在CSS选择器中添加ID。

＆＃13;

$('a#loadInContent').click(function() {
  var page = $(this).attr('href');
  $("#content").load(page);

  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <a href="home.html">Home</a>
  <a href="about.html">about</a>
  <a href="contact.html">contact</a>
</nav>

<div id="content">
  Content goes here
</div>
<script src='js/loader.js'></script>

＆＃13;

Answer 4

对于我们这样的人来说，这也是一个简单的javascript，使用绝对最简单的方法并将一个类添加到目标

＆＃13;

window.addEventListener('load', function() {
  var links = document.querySelectorAll('.content');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function(e) {
      e.preventDefault();
      getContent(e.target.href,document.querySelector('#content'));
    });
  }
})
function getContent(page,target) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      target.innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", page, true);
  xhttp.send();  
}

＆＃13;

<nav>
   <a class="content" href="home.html">Home</a>
   <a class="content" href="about.html">about</a>
   <a href="contact.html">contact</a>
</nav>

<div id="content">
  Content goes here
</div>

＆＃13;

在这种情况下如何为变量添加id？

4 个答案: