锚点和哈希值问题答案

【问题标题】：anchor and hash values issues锚点和哈希值问题
【发布时间】：2011-06-27 18:39:20
【问题描述】：

我有以下代码：

<ul class="questions">
<li><a href="#test1">test1</a></li>
<li><a href="#test2">test2</a></li>
<li><a href="#test3">test3</a></li>
</ul>


<div id="test1">test1 text</div>
<div id="test2">test2 text</div>
<div id="test3">test3 text</div>

我使用此脚本在同一页面中突出显示想要的 id 锚：

<script type="text/javascript">

$(document).ready(function() {

    $(function() 
    {
        $('a').click(function(event) {

           $(location.hash).css("background-color","red");


        });
    });

});
</script>

锚点移动有效，但所选 id 的突出显示不起作用，除非我在第一次加载页面后刷新页面，并且当我单击另一个链接时当前突出显示不会分散

【问题讨论】：

标签： jquery hash anchor

【解决方案1】：

变化：

<script type="text/javascript">

$(document).ready(function() {

    $(function() 
    {
        $('a').click(function(event) {

           $(location.hash).css("background-color","red");


        });
    });

});
</script>

收件人：

<script type="text/javascript">


        $(function() 
        {
            $('a').click(function(event) {

               $(location.hash).css("background-color","red");


            });
        });

    </script>


// This is a shortcut...
$(function() {});

 // for this...
$(document).ready(function(){});

【讨论】：

这应该是jQuery(function($){}); 以正确地将jQuery 别名为$。
@Alexander：没错，但这并不能解决问题。嵌套 .ready() 调用最终是无害的，因为如果 DOM 已经“准备好”，.ready() 也可以工作。
@zzzzBov：jQuery 自动将自己别名为$。 $(function() {}); 是正确的。
@zzzzBov: 默认情况下，jQuery 是正确的别名，但我同意你的方法是一个很好的保障。
@Rocket @patric dw，如果noConflict 被不调用，则它唯一的别名为$。如果您曾经将代码作为插件移植或移植到具有其他框架的页面，则不重新编写所有 doc.ready 事件会更容易。

【解决方案2】：

$(function() {});

是一个快捷方式

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

所以，正如亚历山大所说，你不需要两者。

如果高亮不起作用，您可以尝试：

$(function() {
    $('a').click(function(event) {
       $($(this).attr("href")).css("background-color","red");
    });
});

因为您不能依赖点击事件后更改的位置。有 jQuery 插件允许将事件添加到“哈希更改”，如果您经常使用它，这可能是您的解决方案。

edit：当你点击另一个链接时，当前的高亮不消失是正常的。

$(function() {
    $(location.hash).addClass("red");
    $('a').click(function(event) {
       $(".red").removeClass("red")
       $($(this).attr("href")).addClass("red");
    });
});

.red { background: red; }

【讨论】：

未能在页面加载时设置颜色
您好，您的代码工作完美，只需将 $("a.red").removeClass("red") 更改为 $(".red").removeClass("red")

【解决方案3】：

问题是锚的 href 在处理锚的 onclick 事件之后应用。因此在点击事件期间处理位置的散列还没有改变。

您可以改为依赖 href 属性来更改颜色：

例如：

<script type="text/javascript">
                    $(function() 
                    {
                            $('a').click(function(event) {
                                var divID = $(this).attr("href");
                                $(divID).css("background-color","red");
                            });
                    });
    </script>

【讨论】：

这也可以，但我也需要它用于外部文档，因此位置的哈希值可能会改变
当您说外部文档时，点击锚点时页面不会导航到那些文档吗？
我真的不确定你的方法是否也适用于外部页面，我必须尝试一下。
并不是说它适用于外部页面。如果您的页面被重定向到外部页面，您将不得不在外部页面的页面加载上使用 location.hash。我的意思是在页面加载中你可以有类似“ $(location.hash).css("background-color","red"); ”（我假设链接将包括外部链接的#）

【解决方案4】：

您的脚本存在许多问题：

<script type="text/javascript">
$(document).ready(function() {
  $(function() 
  {
    $('a').click(function(event) {
      $(location.hash).css("background-color","red");
    });
  });
});
</script>

我会从头开始：

确保将您的脚本包含在CDATA 标记中，以防止出现 XML 编码问题：

<script type="text/javascript">
/* <![CDATA[ */
...code...
/* ]]> */
</script>

$(document).ready(...); 与许多其他人注意到的$(function(){}); 相同。大多数人没有意识到的是，它旨在将 jQuery 别名为 $（或您喜欢的任何其他名称）以防止命名空间冲突：

jQuery(function($){
  ...code...
});

当document.ready 事件被触发时，您不会告诉当前哈希值被突出显示：

$(hash).css('background-color', 'red');

好的，所以我使用了一个名为 hash 的变量，因为不能保证已经设置了 hash 或者它会以 '#' 符号开头（我在看你的 IE）。

function normalizeHash()
{
  var hash = location.hash;
  if (hash.length)
  {
    if (hash[0] != '#')
    {
      hash = '#' + hash;
    }
  }
  else
  {
    hash = '';
  }
  return hash;
}

因为您想在设置另一个哈希时关闭颜色，所以您应该使用类

CSS：

.activeHash
{
  background-color: red;
}

JS：

$(hash).addClass('activeHash');

您需要记住在单击功能期间从元素中删除类：

$('.activeHash').removeClass('activeHash');
$(hash).addClass('activeHash');

@Cybernate 发现了一个我错过的问题：在点击事件之后之前哈希不会改变，简单的解决方案是获取锚元素的 href，尽管这假设 @ 987654336@ 没有写入路径（解决方法是同时监听 hashchange 事件）：

hash = $(this).attr('href');

所以把它们放在一起：

<script type="text/javascript">
/* <![CDATA[ */

function normalizeHash()
{
  var hash = location.hash;
  if (hash.length)
  {
    if (hash[0] != '#')
    {
      hash = '#' + hash;
    }
  }
  else
  {
    hash = '';
  }
  return hash;
}

jQuery(function($){
  var hash = normalizeHash();

  $(hash).addClass('activeHash');

  $('a').click( function(e){
    hash = $(this).attr('href');
    $('.activeHash').removeClass('activeHash');
    $(hash).addClass('activeHash');
  } );
});

/* ]]> */
</script>

_{免责声明：我没有测试任何代码，如果我拼写错误，请告诉我。}

【讨论】：

你好，看起来一切正常，只是需要点击两次链接才能显示红色背景
@user602720，@cybernate 发现了一个我错过的问题。我会相应地更新我的答案
我还注意到您的代码在 ff ie8 下工作正常，但在 ie6 和 ie7 下会出现类似这样的错误：异常抛出但未捕获，第 20 行

【解决方案5】：

这是全球通用的最终代码感谢大家的快速响应我很欣赏它:)

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"

lang="zh">

<script src="jquery.js"></script>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">

.red { background: red; }

</style>
</head>
<body>
<ul id="con">
<li><a href="#test1">test1</a></li>
<li><a href="#test2">test2</a></li>
<li><a href="#test3">test3</a></li>
</ul>

<div id="test1">test1 text</div>
<div id="test2">test2 text</div>

<span id="test3" >
<div>
dvdvdvdvdvdvdvdvdvdv
</div> 
</span>



<script type="text/javascript">

$(document).ready(function() {});
{
$('#con a[href*=#]').click(
function(){var elemId='#'+$(this).attr('href').split('#')[1];highlight(elemId);});

function highlight(elemId)
{
$(".red").removeClass("red")
$(elemId).addClass("red");

}
if(document.location.hash){highlight(document.location.hash);}
}

</script>
</body>
</html>

【讨论】：

You don't need to post a thank-you answer;相反，您应该点击帮助您找到解决方案的答案旁边的复选标记。