使用jquery獲取標題名稱爲url

Question

<div class="myclass selected"> 
    <h2 class = "title">#Content 1</h2> 
</div> 
<div class="myclass"> 
    <h2 class = "title">#Content 2</h2> 
</div> 
<div class="myclass"> 
    <h2 class = "title">#Content 3</h2> 
</div> 
<div class="myclass"> 
    <h2 class = "title">#Content 4</h2> 
</div> 

我想在url中顯示爲「http://example.com/#content-1」，並且想要爲每個選擇進行更新。這有可能做到這一點使用jQuery？

Answer 1

$('.myclass h2').click(function(){ 
    window.location = 'http://example.com/' + $.text(this).toLowerCase().replace(/ /g, '-'); 
}); 

---

是否有您不使用常規的鏈接的原因嗎？試試這個：

<div class="myclass selected"> 
    <h2 class="title"> 
     <a href="#content-1">#Content 1</a> 
    </h2> 
</div> 
<!-- Add the others here... --> 

然後，只需添加這個腳本：

jQuery(function() { 
    var hash = window.location.hash; 
    hash && $('.myclass').removeClass('selected').filter(function(){ 
     return $(this).find('a').prop('href') == hash; 
    }).addClass('selected'); 
}); 

Answer 2

更改此

var selected = $('.selected'); 
    selected.removeClass('selected'); 
    selected.hide(); 

    var next = selected.next(".myclass"); 

到

var selected = $('.selected'); 
var next = selected.next(".myclass"); 
selected.removeClass('selected'); 
selected.hide(); 

分配給它之前，你要刪除的類selected到next ..

http://jsfiddle.net/wirey00/Jqfsn/1/