1

请参阅下面的代码。我有整页部分，每个部分都有一个按钮。当按下按钮时，我希望页面进入下一部分。一切正常，除非我将文本包含在<h1></h1>或<p></p>标记中。例如，请参阅第 1 节和第 2 节，在我添加这些标签后，由于某种原因，按钮无法正常工作。它正在其他部分工作。即使在第 1 节中，如果我删除<h1></h1>标签它也可以正常工作。这些标签与按钮的功能有什么关系？

<!DOCTYPE html>
<html>
<head>
    <title>Selecting multiple DIV tags with jquery</title>
    <script type="text/javascript" src="./jquery.js">
    </script>
    <style type="text/css">

        html{
            overflow: hidden;
        }

        body {
            backround-color: rgb(250, 250, 250);
        }

        h1 {
            font-size: 48px;
            color: rgb(90,90,90);
        }

        .slide {
            display: block;
            position: absolute;
            border-style: solid;
            border-width: 1px;
            top: 0px;
            left: 0px;
            padding:20px;
            height: 95%;
            width: 100%;
            font-family: Georgia;
        }
    </style>
</head>
<body>

    <section class="slide">
        <h1>This is the first div.</h1>
    </section>

    <section class="slide">
        <p>This is the second div.</p> 
    </section>


    <section class="slide">This is the third div.</section>

    <section class="slide">This is the fourth div.</section>

    <section class="slide">This is the fifth div.</section>

    <section class="slide">This is the sixth div.</section>



    <script type="text/javascript">

    // Assign ids to each section in the order they appear.

    $(document).ready(function(){
        $("section").each(function(index){
            idtag = 's' + (index + 1)
            $(this).attr('id', idtag);
            $(this).append('<button>Next div</button>');
            $(this).css('opacity', 0);
        });


    var presentation = function() {

        $("section").each(function(index){
            $(this).css('opacity', 0);
        });     
        // Check if the current url points to a specific id. If not point
        // it to id = 1, otherwise point it to the id specified in the URL.

        var currenturl = $(location).attr('href');


        var indexhash = currenturl.lastIndexOf('#')

        if (indexhash === -1) {
            var newurl = currenturl + '#s1';
            $("#1").css('opacity',1);
            window.location.href = newurl;
        }
        else {
            var currentid = currenturl.substring(indexhash, currenturl.length);
            console.log(currentid);
            $(currentid).css('opacity', 1);
            window.location.href = currenturl;
            // window.location.assign(currenturl);
        }

    };

        var nextdiv = function() {
            currenturl = location.href;
            currentid = location.hash;
            console.log(currentid);
            newidnum = parseInt(currentid.substring(currentid.indexOf('s')+1, currentid.length),10)+1;
            newid = "#s" + newidnum;
            newurl = currenturl.substring(0,currenturl.lastIndexOf('#'))+newid;
            console.log(newurl);
            window.location.href = newurl;

        };

        // $(document).ready(presentation);
        presentation();
        $(window).bind('hashchange', presentation);
        $('button').bind('click', nextdiv);

    });

    </script>
</body>
</html>
4

1 回答 1

1

这与 section 元素中的 HTML 元素无关，它与您将所有元素堆叠在一起并将不透明度设置为零而不是使用 display 属性实际隐藏它们的事实有关（display:none与opacity:0）。如果您删除除第一个部分元素之外的所有元素，它可以正常工作，您可以看到这一点。此外，如果您使用 Chrome 的开发者工具之类的工具检查您的代码，您会发现第六部分元素实际上是最上面的元素，并阻止了它下面的所有内容。您还每次都单击相同的顶部按钮，而不是该部分元素的子按钮。您可以通过为每个按钮分配一个 id 然后控制台记录它来看到这一点$('button').click(function(){console.log($('button').attr('id'));});

于 2012-06-26T15:52:28.423 回答