Question

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

我感到困惑的是，是否可能在其他页面上有链接实际链接到此页面上的不同部分。换句话说，“第一部分”链接打开此页面，第一部分显示，“第二部分”链接打开此页面，第二部分已经显示。

有人可以帮忙吗？

<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？

Answer 1

在文档网址中添加哈希，以确定应展开哪个部分。

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

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

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

Answer 2

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

您可以在传入链接（例如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>

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

Answer 3

建立了mrtshermans的答案（这对我很有用......谢谢！）......

if（hash ==''）{

//如果哈希如果为空或空

，则执行某些操作

}

if（hash！==''{

//如果设置了哈希，则执行某些操作

$（'a。'+ hash）.css（'color'，'＃fffffff'）;

}

注意使用'=='而不是'='需要让我的某些CSS生效。

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

3 个答案: