需要 jQuery 显示/隐藏建议，根据上一页点击显示特定的 div答案

【问题标题】：Need jQuery show/hide advice, to show specific div depending on previous page click需要 jQuery 显示/隐藏建议，根据上一页点击显示特定的 div
【发布时间】：2013-01-14 06:34:32
【问题描述】：

我已经构建了一个带有侧边导航的页面，单击的每个选项都会显示某个 DIV，而隐藏其他 DIV。我为此编写了 jQuery，它就像一个魅力。

我很困惑的是，其他页面上的链接是否可能实际上链接到此页面上的不同部分。换句话说，“第 1 节”链接打开此页面并显示第 1 节，以及“第 2 节”链接打开此页面且第 2 节已显示。

谁能帮忙？

<style type="text/css">
    #content div.section    {   display:none;   }
    #content div.one    {   display:block;  }
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>    
<script type="text/javascript"> 
$(document).ready(function() {
    $('#side_nav ul li a').click(function() {
        $('#side_nav ul li.current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).attr('class');

            $('#content div.section').each(function() {
                if($(this).hasClass(filterVal)) {
                    $(this).fadeIn(200);
                } else {
                    $(this).hide();
                }
            });
        return false;
    });
});
</script>

<section class="main wrapper">
    <div id=side_nav>       
        <ul>
            <li class=current><a href="#" class=one>TOPIC ONE</a></li>
            <li><a href="#" class=two>TOPIC TWO</a></li>
            <li><a href="#" class=three>TOPIC THREE</a></li>
        </ul>
    </div>

    <div id=content>
        <div class="section one">
            <h3>Subtitle</h3>
            <p>One Content</p>
            <br>
            <h3>Subtitle</h3>
            <p>One Content</p>
        </div>
        <div class="section two">
            <h3>Subtitle</h3>
            <p>Two Content</p>
            <br>
            <h3>Subtitle</h3>
            <p>Two Content</p>
        </div>                                      
        <div class="section three">
            <h3>Subtitle</h3>
            <p>Three Content</p>
            <br>
            <h3>Subtitle</h3>
            <p>Three Content</p>
        </div>
</section>

谁能详细说明我将如何使用“window.location.hash”从传入的链接点击中捕获哈希标签，并通过上面的 Javascript 传递它以显示适当的 div？

【问题讨论】：

这就是锚点的用途。
尝试使用 jquery 禁用默认操作

标签： jquery hide parameter-passing pass-by-reference show

【解决方案1】：

如果您有来自其他页面的链接包含一些额外信息，那么当您的页面加载时，您将能够检测到您应该显示哪个部分。

您可以将链接类值作为传入链接的哈希值提供，例如yourpage.html#one，然后使用window.location.hash 检索该值。

在您的情况下，您可以在 document.ready() 处理程序中添加一些代码，以查看传入链接是否具有值并根据需要显示该部分。

编辑：更新以包含实施示例。

<script type="text/javascript"> 
    $(document).ready(function() {

        var hashFromLink = window.location.hash != '' ? window.location.hash.replace('#','') : "";
        loadSection(hashFromlink);

        $('#side_nav ul li a').click(function() {
            $('#side_nav ul li.current').removeClass('current');
            $(this).parent().addClass('current');

            var filterVal = $(this).attr('class');

            $('#content div.section').each(function() {
                if($(this).hasClass(filterVal)) {
                    $(this).fadeIn(200);
                } else {
                    $(this).hide();
                }
            });
            return false;
        });
    });

    function loadSection(filterVal) {
        $('#content div.section.' + filterVal).fadeIn(200);                // this should fade in the section with the location hash class
        $('#side_nav ul li a.' + filterVal).parent().addClass('current');  // this should find the anchor tag in the nav and apply the current class to its parent
    }
</script>

再多做几条笔记，显然这只是你可以做到的一种方式。我认为这些选择器应该可以工作，而且您可能还想从哈希值中清理输入。

【讨论】：

您能否给我一个示例，说明使用 window.location.hash 脚本时 document.ready() 代码的样子？到目前为止，我只在另一页上添加了外部mysite.html#one 链接。谢谢！
@glenn 我已经更新了我的答案以包含和示例实现。
你让我走上了正轨，现在工作得很好！谢谢！

【解决方案2】：

在您的文档 URL 中添加一个哈希，以确定应该扩展哪个部分。

http://www.mysite.com/#two

然后通过javascript检查并展开相应区域

var hash = location.hash.replace('#','');
if (hash != '') {
    $('a.' + hash).addClass('current');  //selector is equiv of $('a.two')
}

【讨论】：

【解决方案3】：

基于 mrtshermans 的回答（这对我很有用...谢谢！）...

if (hash == '') {

//如果哈希为空或为空，则做一些事情

}

如果（哈希！=='' {

//如果设置了hash，做一些事情

$('a.' + hash).css('color', '#ffffff');

}

请注意，需要使用 '==' 而不是 '=' 才能使我的某些 css 生效。

【讨论】：