jquery - 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/