Javascript 基于当前位置的单页隐藏/显示节_Javascript_Jquery_Html_Css

Javascript 基于当前位置的单页隐藏/显示节

javascript jquery html css

Javascript 基于当前位置的单页隐藏/显示节,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在一个单页网站上工作，每个页面都被组织成部分标签。每个部分都被放置在彼此的顶部。我需要一种使用jquery的方法，根据当前位置，DOM将隐藏其余部分。例如：（按下“关于”链接将带您进入“关于”部分）我当前的DOM结构： <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Create Single

我在一个单页网站上工作，每个页面都被组织成部分标签。每个部分都被放置在彼此的顶部。我需要一种使用jquery的方法，根据当前位置，DOM将隐藏其余部分。例如：（按下“关于”链接将带您进入“关于”部分）

我当前的DOM结构：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Single Scroll</title>

    <!-- custom css -->
    <link rel="stylesheet" type="text/css" href="style.css">



    <!-- bootstrap -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">


</head>
<body>

    <nav class="navbar navbar-fixed-bottom navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">Create Theme</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>

<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12 text-center">
                <h1 class="introtext">Title here</h1>
                <span class="btn buttonborder">
                    Text placeholder
                </span> 
            </div>
        </div><!-- row -->
    </div>
</section>



<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>Test 2</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet scelerisque leo, sit amet adipiscing odio. Praesent leo nisi, placerat in eros in, molestie auctor augue. Sed semper dui est, et facilisis mauris dapibus sed. Maecenas viverra vitae felis vel convallis. Suspendisse malesuada orci non risus dictum pretium. Nulla condimentum vulputate neque nec sollicitudin. Curabitur gravida pulvinar consectetur.</p>
            </div>
        </div>
    </div>
</section>

<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>Test 3</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet scelerisque leo, sit amet adipiscing odio. Praesent leo nisi, placerat in eros in, molestie auctor augue. Sed semper dui est, et facilisis mauris dapibus sed. Maecenas viverra vitae felis vel convallis. Suspendisse malesuada orci non risus dictum pretium. Nulla condimentum vulputate neque nec sollicitudin. Curabitur gravida pulvinar consectetur.</p>
            </div>
        </div>
    </div>
</section>



<!-- Javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script src="script.js"></script>



</body>

</html>

您应该为每个部分提供一个id，即。

将

部分的css更改为包含显示：无
属性
使用以下JS代码：
$(document).ready(function() {
    $('section').eq(0).show();
    $('navbar-nav').on('click', 'a', function() {
        $($(this).attr('href')).show().siblings('section:visible').hide();
    });
});

或者，如果您遵循严格的顺序（例如，首先是关于，其次是服务，等等）：
这两种方法都允许动态内容，不过我个人会使用最后一种方法。
为链接添加id
<li><a id="about" href="#about">About</a></li>

使用数据索引而不是#id
在所有li上添加数据索引
<ul class="nav navbar-nav">
    <li data-index="about"><a href="#about">About</a></li>
    <li data-index="services"><a href="#services">Services</a></li>
    <li data-index="contact"><a href="#contact">Contact</a></li>
</ul>







然后对各部分执行相同的操作
<section class="content" data-index="services">
    ....
</section>


....

有关更多详细信息，请参见此操作
您只需在读取当前window.location的哈希部分的位置注册hashchange回调，即可实现此操作。您可以选择不同于id的DOM选择技术
<script>
    $( document ).ready(function() {
        $("section").hide();

        $(window).on("hashchange", function(){
            var hash = window.location.hash.substring(1); // hash part of url withou the first letter (#)
            $("section").hide();
            $("#"+hash).show();
        });
    });
</script>


$（文档）.ready（函数（）{
$（“节”）.hide（）；
$（window）.on（“hashchange”，function（））{
var hash=window.location.hash.substring（1）；//用第一个字母（#）散列url的一部分
$（“节”）.hide（）；
$（“#”+散列）.show（）；
});
});

请注意，还添加了用于隐藏和取消隐藏元素的ID
<section id="about">


但HTML中没有“关于”部分code@Kostis我不知道是应该给每个部分提供自己的ID，例如，还是一个数据索引。我宁愿它是动态的，所以数据索引可能是更好的选择。将每个部分描绘成它自己的页面。您可以创建和删除对象？这一部分将允许您使用简单的锚定URL（#ID）。|从Bootstrap主题btw（时尚组合）中获得
<ul class="nav navbar-nav">
    <li data-index="about"><a href="#about">About</a></li>
    <li data-index="services"><a href="#services">Services</a></li>
    <li data-index="contact"><a href="#contact">Contact</a></li>
</ul>

<section class="content" data-index="services">
    ....
</section>

<script>
    $( document ).ready(function() {
        $("section").hide();

        $(window).on("hashchange", function(){
            var hash = window.location.hash.substring(1); // hash part of url withou the first letter (#)
            $("section").hide();
            $("#"+hash).show();
        });
    });
</script>

<section id="about">