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

我使用 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 回答
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 回答