0

私はシンプルな jQuery アコーディオンを使用しています。タブ HMTL 要素の ID につながるアンカー付きの URL をクリックすると、タブが開きます。

実際のシナリオ: URL www.domain.com/index.php&something#sometabid のナビゲーション リンクがあります。そのリンクをクリックすると、その URL のページにリダイレクトされ、ページは CSS ID sometabid のアコーディオン タブにスクロールします。その時点で、このアコーディオン タブを開いてもらいたいのですが、デフォルトの状態は閉じています。

コード：

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        padding: 20px
    }    
        h4.open-close {
        background: #f5f5f5;
        border: 1px solid #DDD;
        border-radius: 5px;
        box-shadow: 0 1px 0 white inset;
        margin-bottom: 10px;
        padding: 7px;
    }
    .desc {
        overflow: hidden;
        padding-bottom: 10px;
        padding-top: 0;
    }
</style>

<script type="text/javascript">
    $('.desc').hide();
        $('h4.open-close').click(function (evt) {
            evt.preventDefault();
            if ($(this).is('.current')) {
                $(this).removeClass('current');
                $(this).next('.desc').slideUp(400);
            } else {
                $('.desc').slideUp(400);
                $('h4.open-close').removeClass('current');
                $(this).addClass('current');
                $(this).next('.desc').slideDown(400);
            }
        });​
</script>
</head>
<body>
    <h4 id="sometabid1" class="open-close">
        <a href="#">Urniki</a>
    </h4>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a luctus mi. Sed non libero turpis. Donec mauris lorem, sollicitudin non facilisis in, fermentum vel tortor.</div>

    <h4 id="sometabid2" class="open-close">
        <a href="#">Dejavnosti</a>
    </h4>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a luctus mi. Sed non libero turpis. Donec mauris lorem, sollicitudin non facilisis in, fermentum vel tortor.</div>
</body>
</html>

jsfiddle リンク

jQuery UIアコーディオンを使用している場合、解決策があることは知っていますが、軽量のソリューションを好み、この追加機能は最初から計画されていなかったため、jQuery UIを使用したくありません。

よろしくお願いします。

4

1 に答える 1

3

最初にハッシュ リンクを取得します。

function getAnchor(url)
{
    var index = url.lastIndexOf('#');
    if (index != -1)
        return url.substring(index);
}

これを使用して、ドキュメントを処理します。

currentAnchor = getAnchor(location.href);
$("#" + currentAnchor).show();

または似たようなもの。

説明：

あなたがURLにいると考えてください：

http://example.com/index.html#slide2

関数を使用する場合：

currentAnchor = getAnchor(location.href);

は値としてcurrentAnchor持ちslide2ます。このようにアコーディオンを持っているとしましょう:

<ul>
    <li class="slide" id="slide1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

これで、次の方法で正しいアコーディオンに移動できます。

$(currentAnchor).show();

あなたの場合、それは次のようになります。

    $('.desc').slideUp(400);
    $('h4.open-close').removeClass('current');
    $(currentAnchor).addClass('current');
    $(currentAnchor).next('.desc').slideDown(400);
于 2012-10-30T09:13:22.250 に答える