Question

请参阅下面的代码。我有完整的页面部分，每个部分都有一个按钮。按下按钮后，我希望页面继续下一部分。一切正常，除非我在<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>

Answer 1

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

控制台进行控制来查看

将html标签添加到文本禁用按钮功能

1 个答案: