2

私は小さなプロジェクトに取り組んでおり、質問があります。私が取り組んでいるウェブサイトは次のように構成されています: ページャー付きの 3 ボックス レイアウト ウェブサイトのすべてのセクションは同じドキュメントにあり、レイアウトでは上部の青い部分がメニューであり、数字は 1 2 の位置を (jQuery を使用して) 変更します選択したセクションをその中央に移動し、他のセクションをレイアウトから移動する 3 つの div。

    $("li").click(function() {
    var selectedText = $(this).text();
    $(this).addClass("active");
    $(this).siblings().removeClass("active");
    if (selectedText == "Upload") {
        $('#homePage').animate({
            left: 2000
        }, 1000);
        $('#upload').animate({
            left: 105
        }, 1000);
        $('#explore').animate({
            left: 2000
        }, 1000);

    }
    if (selectedText == "Gallery") {
        $('#homePage').animate({
            left: 0
        }, 1000);
        $('#upload').animate({
            left: -2000
        }, 1000);
        $('#explore').animate({
            left: 2000
        }, 1000);

    }
    if (selectedText == "Explore") {
        $('#homePage').animate({
            left: -2000
        }, 1000);
        $('#upload').animate({
            left: -4000
        }, 1000);
        $('#explore').animate({
            left: -2000
        }, 1000);

    }
});

私が今しなければならないことは、セクションを変更するときにウェブサイトの URL を適切に変更することです。URL によって適切なセクションにアクセスできるようにしたいと考えています。location.hash メソッドを試しましたが、ハッシュ値を変更すると、スライド移動の jquery アニメーションが誤って div に移動します (ハッシュ値として「var selectedText」を持つここに投稿された同じコードを使用)...解決策と私は HTML5 pushState を見つけましたが、AJAX 要求などがないため、私の場合はそれを使用する方法を実際には理解できません。みんなありがとう！

4

2 に答える 2

0

URI を取得します。

document.documentURI

そして、セクションを取得します。

var URI = document.documentURI;
var section = URI.substring( URI.lastIndexOf('/') + 1 ).replace('.html', '');

これはfooから戻りますwww.xy.com/foo.html

あなたの質問が正しいことを願っています。

于 2013-07-12T13:14:46.887 に答える
0

GET変数とこのコードを使用してこれを解決しました：

    $class="gallery";
if (isset($_GET['p'])){
    $p = $_GET['p'];
    if($p == "explore"){
        $headerActive = $userIsLoggedIn ? 0 : 2;
        $class="explore";
    }
    if($p == "gallery"){
        $headerActive = $userIsLoggedIn ? 0 : 1;
        $class="gallery";
    }
    if($p == "upload"){
        $headerActive = $userIsLoggedIn ? 0 : 0;
        $class="upload";
    }
}

そしてこれはインデックスにあります：

<div id="center" style="overflow-x: hidden">
            <div id="content" class="initial-<?= $class?>">
                <?php if($userIsLoggedIn): ?>
                    <? require('templates/submit_form.php') ?>  
                <?php else: ?>
                <div id="uploadform">
                <? require('signin_form.php') ?>
                </div>

                <?php endif; ?>


                <? require('templates/stickers.php'); ?>
                <? require('templates/explore.php'); ?>
            </div>
        </div>

それを機能させるためのCSS：

#content.initial-gallery #upload {
    left: -2000px;
}

#content.initial-gallery #homePage {
    left: 0px;
}
#content.initial-gallery #explore {
    left: 2000px;
}

#content.initial-upload #upload {
    left: 105px;
}

#content.initial-upload #homePage {
    left: 2000px;
}
#content.initial-upload #explore {
    left: 4000px;
}
#content.initial-explore #upload {
    left: -4000px;
}

#content.initial-explore #homePage {
    left: -2000px;
}
#content.initial-explore #explore {
    left: -2000px;
}

とにかくみんなありがとう！

于 2013-07-15T13:01:20.247 に答える