使用location.hash來激活jQuery切換/ slideToggle

我有一個使用jQuery切換和slideToggle的列表的列表，以便當項目被點擊時，說明性文字滑出，並且類在h3上發生變化。對於項目的HTML如下：使用location.hash來激活jQuery切換/ slideToggle

<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，但我不知道該怎麼做。我應該從哪裏開始？

來源

2011-07-14 pg.

我敢肯定，你需要到'onload'事件，以便響應新的點擊將爲你的腳本註冊一些東西來回應。訣竅是該頁面並未真正重新加載，但您仍然可以獲得該事件。 – ErikE

location.hash包含URL中的所有內容以及散列（＃）標記之後。所以，如果去的index.php＃特徵1和希望ID爲「特徵1」的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) 
     } 
    } 
});

來源

2011-07-14 22:33:34

這工作正常，除了在h3上的類沒有改變。我怎樣才能做到這一點？ –

只需在if的主體中添加'$（「。」+ id）.addClass（「check_list_selected」）;'。我會編輯答案。 –

這改變了check_list_wrap上的類，我試圖改變它上面的h3上的類 –

使用location.hash來激活jQuery切換/ slideToggle

回答

相關問題