0

我正在创建一个新闻页面。我需要找出是否为文章设置了锚点。如果没有，我只展示最新的文章。带有锚的示例 URL 是：example.com/news.php#article43

HTML结构是：

<div>
  <a name="article43"></a>
  <h2>TITLE</h2>
  <div class="news_content"></div>
</div>

我的 JS 是这样的：

 var anchor = $(location).attr('href').split('#');
        if(anchor[1]){
            $('a[name=' + anchor[1] + ']').next('.news_content').show();
        }else{
            $('.news_content').first().show();
        }

有些东西不行。

4

5 回答 5

2

next只会在元素之后返回直接兄弟，你可能想要nextAll：

$('a[name=' + anchor[1] + ']').nextAll('.news_content').show();

或者，如果您的 HTML 结构不涉及换行，即：

<div>
  <a name="article43"></a>
  <h2>TITLE</h2>
  <div class="news_content"></a>
  <a name="article44"></a>
  <h2>TITLE</h2>
  <div class="news_content"></a>
</div>

你想要：http: //jsfiddle.net/AVg3y/

$('a[name=' + anchor[1] + ']').nextAll('.news_content').first().show();

此外，这可能只是一个错字，但您的 HTML 格式不正确。它应该是：

<div>
      <a name="article43"></a>
      <h2>TITLE</h2>
      <div class="news_content"></div> //<-- oops
</div>
于 2013-01-21T22:47:56.833 回答
1

试试这个（使用兄弟姐妹而不是下一个）：

var anchor = location.href.split('#');

if(anchor[1]) {
    $('a[name=' + anchor[1] + ']').siblings('.news_content').show();
} else {
    $('.news_content').first().show();
}
于 2013-01-21T22:40:12.063 回答
0

我解决了这个问题。

首先：我需要使用你们许多人所说的 nextAll() 。

第二：我在 jQuery 中包含了一个 CSS（仅在启用 JS 时使用）。我必须在 $(document).ready 函数之前包含它。否则它将 news_content 元素设置为 display:none

感谢所有试图帮助我的人。

于 2013-01-21T23:35:14.690 回答
0

您可以通过查看window.location.hash. 使用substring(1), 返回值#中的所有内容window.location.hash。

if(window.location.hash) {
    $('a[name=' + window.location.hash.substring(1) + ']').next('.news_content').show();
} else {
    $('.news_content').first().show();
}
于 2013-01-21T22:39:42.363 回答
-1

所有答案都有哈希的相似变化，但没有一个检查哈希是否有匹配的元素：

我建议检查该元素是否作为条件的一部分存在。

var contentToDisplay=$('.news_content').first();
if(anchor[1]){
   var $link=  $('a[name="' + anchor[1] + '"]');
   contentToDisplay= $link.length ?  $link.next().next('.news_content') : contentToDisplay;

}
contentToDisplay.show()
于 2013-01-21T23:02:38.713 回答