我有一个使用jquery切换和slideToggle的列表列表,这样当单击项目时,解释性文本会滑出并且类在h3上更改。项目的html如下所示:
<li><h3><a href="#" target="_blank" id="feature1" name="feature1">What do I know about javascript?</a></h3>
<div class="check_list_wrap feature1">Not a lot, apparently.</div>
</li>
我包含了jquery文件,然后将其写入标题:
<script type="text/javascript">
$(function() {
$("#listfeatures h3 a").toggle(function(){
$(this).addClass("check_list_selected");
}, function () {
$(this).removeClass("check_list_selected");
});
$("#listfeatures h3 a").click(function() {
$("."+this.id).slideToggle('fast');
return false;
});
});
</script>
这使得如果单击链接,它将切换h3的类更改,display:block / display:inline和滑出div。它工作正常。
但是,现在我想要它,以便使用像index.php#feature1这样的URL,该列表项的切换将被激活,就像它被点击一样。我知道我需要使用location.hash,但我不知道该怎么做。我应该从哪里开始?
答案 0 :(得分:1)
location.hash
包含URL中的所有内容,包括哈希(#)标记之后。所以,如果去了index.php#feature1并希望在加载时显示id为“feature1”的div,你可以这样做
$(document).ready(function() {
if(location.hash) {
var id = location.hash.slice(1); //Get rid of the # mark
var elementToShow = $("#" + id); //Save local reference
if(elementToShow.length) { //Check if the element exists
elementToShow.slideToggle('fast'); //Show the element
elementToShow.addClass("check_list_selected"); //Add class to element (the link)
}
}
});