Question

我有以下代码：

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

锚定运动有效但所选内容的突出显示不起作用，除非我在第一次加载页面后刷新页面，当我点击另一个链接时当前高亮显示不会分散

Answer 1

$(function() {});

是

的快捷方式

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

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

如果突出显示不起作用，您可以尝试：

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

因为您无法依赖点击事件后更改的位置。有一些jQuery插件允许将事件添加到“on hash change”中，如果您经常使用它，这可能是一个解决方案。

编辑：当您点击另一个链接时，当前突出显示不会消失是正常的。

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

.red { background: red; }

Answer 2

问题是在处理锚点的onclick事件之后，锚点 href 被应用。因此，点击事件期间的处理位置的哈希值尚未更改。

您可以依靠href属性来改变颜色：

e.g：

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

Answer 3

变化：

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

Answer 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的变量，因为不能保证哈希设置或者它会以'＃'符号开头（我正在看你的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，尽管这假定href不是用路径写的（解决方法也是监听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>

_{免责声明：我没有测试任何此类代码，如果我犯了错误的错误，请告诉我。}

Answer 5

这是全球有效的最终代码，谢谢大家的快速回复我感激它：）

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

郎= “EN” ＆GT;

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

锚点和哈希值问题

5 个答案: