0

我已经建立了一个带有侧边导航的页面，单击的每个选项都会导致显示某个 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？

4

3 回答 3

1

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

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

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

var hash = location.hash.replace('#','');
if (hash != '') {
    $('a.' + hash).addClass('current');  //selector is equiv of $('a.two')
}
于 2013-01-14T06:40:07.713 回答
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>

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

于 2013-01-14T06:49:16.830 回答
0

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

如果（哈希==''）{

//如果有hash如果为空或null，则做一些事情

}

如果（哈希！=='' {

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

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

}

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

于 2013-03-12T21:41:57.467 回答