从锚目标中的元素中清除类

时间:2012-09-04 19:02:06

标签: javascript jquery html

全部。我已经研究了一段时间,似乎无法提出解决方案。我正在为我们的内部网工作一个新的FAQ,我正在使用jquery scrollTo插件和localScroll插件来实现它的感觉。我添加的一件事是当用户点击问题的链接时,它会将用户向下滚动到答案并以红色突出显示字段集以指示他们问题的答案。

我的JS看起来像这样:

function styleRow(myId) {
  ID = myId.substring(1) var ID = document.getElementById(ID)
  ID.className += " highlight"
}

我的HTML看起来像这样:

<li><a href="#1_1" onclick="styleRow('#1_1')">Question 1<a></li>
<li><a href="#1_2" onclick="styleRow('#1_2')">Question 2</a></li>
<li><a href="#1_3" onclick="styleRow('#1_3')">Question 3</a></li>


<fieldset class="pad18" id="1_1">
<legend class="SubTitleSmall" id="1_1">Answer 1</legend>
     <p class="MT12 ML24">Answer 1 Text</a></p>
</fieldset> 

     <fieldset class="pad18" id="1_2">
<legend class="SubTitleSmall" id="1_2">Answer 2</legend>
<p class="MT12 ML24">Answer 2 Text</p>
</fieldset> 

<fieldset class="pad18" id="1_3">
<legend class="SubTitleSmall" id="1_3">Answer 3</legend>
     <p class="MT12 ML24">Answer 3 Text</p>
</fieldset>

目前,当用户点击书签链接时,该行突出显示就好了。但是,如果他们返回到顶部并单击另一个链接,则样式不会清除先前选择的问题。我知道目前没有包含任何代码,这就是我在这里的原因。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:1)

如果你使用jQuery,

function styleRow(myId){
    $(".highlight").removeClass("highlight");
    $(myId).addClass("highlight");
}

但请注意id

  • 必须以字母开头:A-Z或a-z
  • 后面可以跟字母(A-Za-z),数字(0-9),连字符(&#34; - &#34;)和下划线(&#34; _&#34;)