使用location.hash激活jquery toggle / slideToggle

时间:2011-07-14 21:43:04

标签: javascript jquery location toggle slidetoggle

我有一个使用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,但我不知道该怎么做。我应该从哪里开始?

1 个答案:

答案 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)
        }
    }
});