Question

我正在创建一个单页网站。我在<section>代码之间组织了多个“页面”。我写了一些jQuery来隐藏除第一个之外的所有部分。我的问题是我正在尝试进行动态导航，以显示基于数据索引连接的部分。

HTML：

<html>
<head>
    <title>Title</title>
</head>
<meta name="viewport" content="width=device-width">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>

<!-- Side Menu -->
<div class="container-fluid topheader">
<h1 class="text-center">Page 1</h1>

    <a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
            <li class="sidebar-brand"><a href="http://startbootstrap.com">Start Bootstrap</a>
            </li>
            <li><a href="#top">Home</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#services">Services</a>
            </li>
            <li><a href="#portfolio">Portfolio</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
        </ul>
    </div>
</div>


    <!-- /Side Menu -->

<section>
    <p class="nextbutton">Next</p>
    <p class="backbutton">Back</p>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Test</h1>
        </div>
    </div>
</div>
</section>

<section>
        <p class="nextbutton">Next</p>
    <p class="backbutton">Back</p>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Test 2</h1>
        </div>
    </div>
</div>
</section>



    <!-- Footer -->
    <footer id="footer">
        <div class="container-fluid">
            <div class="row">
                    <div class="col-md-6" id="circlenav">
                    <p>Nav</p>
                    </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <h3>Title</h3>
                 </div>  
            </div>
        </div>
    </footer>
    <!-- /Footer -->


    <!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
    <script>
    $("#menu-close").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    </script>
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });
    </script>
    <script>
    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
    </script>



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






 $('section').each(function(i){
        $(this).attr('data-index', i+1);
    });

    $('section').each(function(i,v) 
    { 
        if(i < $('section').length) { 
            var nav = $('<li data-index="'+(i+1) + '"><a href="#">' + ($(this).children().attr('name'))+'</a>'+'</li>'); 
            $('#circlenav').append(nav);
        }
    });

    $('section').hide();
    $('section[data-index="1"]').show();

使用jquery制作的导航栏显示/隐藏部分

0 个答案: