我一直在网站上工作并遇到问题。在我的FAQ中,我有一个下拉菜单和一个提交按钮来链接到FAQ的不同部分。这工作完美。提交按钮触发一个javascript函数,该函数动态链接到页面上的适当锚点。另外,我希望下拉菜单中选择的问题以橙色突出显示。我突出显示了,但只是在闪烁之前一秒钟。我想知道如何让突出显示保持,而不是闪光?我不确定为什么会发生这种情况。另外,我怎样才能让使用jQuery的突出显示淡出?我知道如何通过隐藏div然后使用.fade()来实现,但这会导致所有文本消失。非常感谢!toggleClass()不适用于div
继承人小提琴:http://jsfiddle.net/UjPtv/但它不能完全工作,因为当你提交它时出现了一个错误。我认为这是因为jsfiddle不允许提交,即使这个提交只是运行一些JavaScript。如果您知道解决方法,请让我知道,以便我可以更新链接!谢谢!
的javascript:
var toggled = 0;
function jump_to (location) {
if(toggled == 0){
toggled = 1;
window.location.href = "#" + location;
$("#wrap"+location).toggleClass("wraps_active");
}
}
HTML:
<div id = "main">
<h2 class = "center">FACTS YOU NEED</h2>
<h3>The Core Facts You Want To Know</h3>
<div class = "border">
<p>
Jump To:
<form onsubmit = "jump_to(jump_list.value)">
<select name = "jump_list">
<option value="1">Who can go to the camp?</option>
<option value="2"><a href = "contact_information.html">When do we check in and out?</a></option>
</select>
<input type = "submit" value = "Go"/>
</form>
</p>
</div>
<div id = "wrap1" class = "wraps">
<h4><a name = "1"></a>Who can go to the camp? </h4>
<p>
The camp is for kids ages 9 to 17 years old who have been diagnosed with celiac disease, a condition that requires life-long adherence to a gluten-free diet. Given limited space, we are unable to accommodate kids on gluten-free diets for other reasons (such as autism spectrum disorders). Campers ages 16-17 years may choose to volunteer as junior counselors. Junior counselors assist the adult volunteers, and for first session junior counselors need to arrive a day early (on Monday) for the staff orientation and training. If there are more junior counselor applicants than there is available space, priority is given based on age, gender-need, and prior camp experience.
</p>
</div>
<div id = "wrap2" class = "wraps">
<h4><a name = "2"></a>When do we check in and out?</h4>
<p>
Check-in: Please see the "Calendar" on the left hand side of the website for details about each camp.Please do not arrive early.
</br><br/>
Check-out: All campers must be checked out by the stated time so camp can be prepared for the next group, see the "Calendar" for date information.
</p>
</div>
</div>
CSS:
.wraps{
border-bottom:1px dashed #C3C3C3;
}
.wraps_active{
border-bottom:1px dashed #C3C3C3;
background:#FFB280;
}
'.toggleClass()'方法的第二个参数接受一个布尔值,以确定的方式切换它。 –