1

jQuery + HTML + CSS

我正在尝试获取导航栏上的链接以更新我拥有的“div”标签。我得到了它的工作，但我必须单击每个超链接两次，然后才能将页面加载到主查看器上。为什么？如何一键加载？

测试.js：

function onScreen(id){
    $("a#" + id).click(function(){$("div#viewer").load(id + '.html')});  
}

主.html：

<a href="#" id="about" onclick="onScreen('about')">About Us</a>
<a href="#" id="account" onclick="onScreen('account')">My Account</a>

等等

<div class ="article" id="viewer">
    <p>welcome to this awesome site! </div>

在同一个文件夹中有一个“about.html”文件（以及所有其他必要的文件）。再次，代码功能，只是不像它应该的那样。

4

6 回答 6

5

第一次点击执行onScreen，它将加载函数与点击事件相关联。因此，第二次单击时会触发加载功能。

编辑

一个解决方案可能是删除标签onclick上的属性<a href=#>

$(function(){
    $("a[href='#']").click(function(){$("div#viewer").load(this.id + '.html')});
})
于 2012-07-26T22:01:26.797 回答
2

将屏幕更改为

function onScreen(id){
   $("div#viewer").load(id + '.html'); 
}

解释：

您之前所做的是在单击时将单击事件附加到链接。这意味着当您第一次单击时，它启用了链接以加载您的内容以供下次单击，因此只能在第二次工作。

于 2012-07-26T22:01:08.497 回答
2

你只是有一些冗余代码。您附加了两个点击事件。

  1. 在标记中内联onClick属性。
  2. 在onScreen()与.click().

只有在您单击链接后，才会.click()创建实际的处理程序。因此，您必须单击一次以创建处理程序，然后第二次单击将触发回调函数。

您可以删除.click()并保留该函数中的代码。所以你的onScreen()功能看起来像这样 -

function onScreen(id){
  $("div#viewer").load(id + '.html');
}

您还可以改用此语法来改进代码 -

$('a.internalLink').on('click',function(
  $("div#viewer").load($(this).id + '.html');
));

这假设您为所有<a>想要表现得像这样的标签提供了internalLink. 为相似的元素赋予相同的类名要容易得多，这样您就可以使用 jQuery 选择器轻松地对它们进行分组。

自 jQuery 1.7+ 起，较新的.on()函数是首选

于 2012-07-26T22:03:24.300 回答
2

嗯...首先，这不是最好的解决方案。一个更好的解决方案是：

<a href="about.html" class="scriptable" id="about">About Us</a>
<a href="account.html" class="scriptable" id="account">My Account</a>

和

$(document).ready(function(){
     function displayScreen(screenname){
         var url_to_load = screenname + '.html';
         $('#viewer').load(url_to_load);

     }
     $('.scriptable').live("click", function(ev){
         var screenname = $(this).attr('id');
         displayScreen(screenname);
         ev.preventDefault();
     });
});

Facebook 做了一个类似的解决方案，虽然他们使用 rel="ajaxify" 属性来做，但原理是完全一样的。

（下一步：使用某种历史 API 使 URL 跟随用户导航）

于 2012-07-26T22:08:14.470 回答
1

看到您正在使用 jQuery，请放弃内联onclick并改为绑定。这使您的代码更清晰，更易于理解和修改。

<a href="#" id="about" class="viewer">About Us</a>
<a href="#" id="account" class="viewer">My Account</a>
<div class ="article" id="viewer">
    <p>welcome to this awesome site!</p>
</div>
​&lt;script>
$(function(){
    $("a.viewer").click(function(){
        alert($(this).attr('id') + '.html');
        $("div#viewer").load(this.id + '.html')
    });  
})​;
</script>

工作 JSFiddle

于 2012-07-26T22:04:12.833 回答
0

尝试

$(document).ready(function(){
  $("a").click(function(){
    $("div#viewer").load(this.id + '.html')
  });
});
于 2012-07-26T22:07:48.043 回答