Question

当点击特定链接时，我正在使用此代码段将内容淡化为div ....

<script language="JavaScript">
    $(document).ready(function () {
        $('#section1, #section2, #section3').addClass('js');
        $('#content-container a').click(function (e) {
            e.preventDefault();
            var rel = $(this).attr('rel');
            $('#' + rel).fadeIn().siblings('div').fadeOut();
        });
        var link = document.URL.split('#')[1];
        if (link) {
            var el = $('#' + link);
            if (el) el.click();
        }
    });
</script>

有没有办法使用URL加载指定的内容而不是点击？所以我可以链接到www.mydomain.com/mypage.php#section2或类似的东西？

更新

这是简化代码http://jsfiddle.net/k6RhR/

的jsfiddle

Answer 1

jQuery load()允许您指定页面的部分，如：

$( "#container" ).load( "/mypage.php #section2" );

Answer 2

您可以这样做：

if(window.location.hash && window.location.hash=="#section2") {
    // Do stuff that are meant to happen when this hash is present.
}

Answer 3

试试这个

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>mouseover demo</title>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <style>
        .invisible
        {
            display: none;
        }
        .lorem
        {
            height: 300px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            getContent();
        });
        $(window).bind('hashchange', function (e) {
            getContent();
        });

        function getContent() {
            var url = window.location.toString();
            var hash = url.substring(url.indexOf('#'));
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 2000);
            $(hash).fadeIn();
            $(hash).siblings("div").fadeOut();
        }
    </script>
</head>
<body>
    <div class="lorem">
        <div id="section1" class="invisible">
            Content 1
            <p style="text-align: justify;">
                Content 1 content</p>
        </div>
        <div id="section2" class="invisible">
            Content 2
            <p style="text-align: justify;">
                Content 2 content</p>
        </div>
        <div id="section3" class="invisible">
            Content 3
            <p style="text-align: justify;">
                Content 3 content</p>
        </div>
        <div id="section4" class="invisible">
            Content 4
            <p style="text-align: justify;">
                Content 4 content
            </p>
        </div>
    </div>
    <div id="links">
        <a href="#section1" rel="section1" id="section1">Section 1</a>
        <br />
        <a href="#section2" rel="section2" id="section2">Section 2</a>
        <br />
        <a href="#section3" rel="section3" id="section3">Section 3</a>
        <br />
        <a href="#section4" rel="section4" id="section3">Section 4</a>
    </div>
</body>
</html>

这就是你要找的东西。在加载时，页面将查找#section以显示内容。单击锚点后，哈希链接将被更改，哈希更改功能将加载到所需内容中。

如果您有任何疑问，请告诉我。

使用URL参数触发Javascript

更新

3 个答案: