1

カルーセルに似たスライド効果を作っています。4 つのボックスを設定します。各ボックスの内容は異なり、ナビを使用してナビゲートします。

更新するたびに、ページが最初のボックスに戻ることがわかりました。しかし、ページが更新前のボックスに戻ることを願っています。また、「a」タグをクリックすると、「#box*」が URL に追加されません。これはどのように解決できますか？

<ul id="menu" class="nav nav-list span2">
    <li class="nav-header">nav</li>
    <li class="active">
        <a href="#box1" class="link">box1</a>
    </li>

    <li>
        <a href="#box2" class="link">box2</a>
    </li>

    <li>
        <a href="#box3" class="link">box3</a>
    </li>

    <li>
        <a href="#box4" class="link">box4</a>
    </li>
</ul>


<li id="box1" class="box">

    <div>XXXXX</div>
</li>

<li id="box2" class="box">

    <div>XXXXX</div>
</li>

JavaScript コード

$('a.link').click(function(){
    $(this).parents("ul").children("li").removeClass("active");
    $(this).parents("li").addClass("active");
    $('#wrapper').scrollTo($(this).attr('href'), 800);
    return false;
});
4

3 に答える 3

0

削除する

 return false;

スクリプトから。これにより、URL に #box* が追加されます。

于 2013-08-23T15:48:10.083 に答える
0

アンカー <a href="#box1"> を使用する場合、移動先の "#box1" ID を持つ別の領域がページに存在する必要があります。アドレス バーに何も表示されない場合は#、JavaScript が問題を引き起こしています。

例: jsfiddle.net/dc5vq/1

コード：

<a href="#go1">go to 1</a><br><br>
<a href="#go2">go to 2</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h1 id="go1">This is Go1</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="go2">This is Go2</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
于 2013-08-23T12:35:37.193 に答える