Goto' next'和之前的'页面中的HTML元素使用javascript

时间:2016-05-13 06:51:30

标签: javascript html

我创建了一个脚本,该脚本使用全局变量来定义当前显示的部分,运行一个函数来添加或减去它,并使用该值通过显示特定部分来转到下一个或上一个元素。基本上,一个HTML文件中有多个页面。

我更新了网页以包含您的建议。

使用内置JavaScript的HTML

<html style="font-family:Segoe UI;font-size:150%;text-indent:2em;text-align:justify;color:000;background:FFF">
    <body style="padding:1% 3% 3% 1%">
        <section id='controls'>
            <h1 id='prev' style="float:left;cursor:context-menu;color:#888" onclick="i('prev')">Prev Chapter</h1>
            <h1 id='next' style="float:left;cursor:hand;color:#0F8" onclick="i('next')">Next Chapter</h1>
        </section>
        <section id='x0' class='x' style="display:block;cursor:context-menu">
            <script>
        var page = 0
        var a = document.getElementById('prev');
        var b = document.getElementById('next');
        var c = document.getElementsByClassName('x');
        function i(action) {
            if (action == 'prev') {
                if (page == 0) {
                    a.style.cursor = 'context-menu';
                    a.style.color = '#FFF';
                } else {
                    a.style.cursor = 'hand';
                    a.style.color = '#08F';
                    page = page - 1
                }
            }
            if (action == 'next') {
                if (page == 0) {
                    b.style.cursor = 'context-menu';
                    b.style.color = '#FFF';
                } else {
                    b.style.cursor = 'hand';
                    b.style.color = '#0F8';
                    page = page + 1
                }
            }
            for (var i = 0; i < c.length; ++i) {c[i].style.display = 'none';}
            document.getElementById('x'+page).style.display = 'block';
        }

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

1 个答案:

答案 0 :(得分:0)

javascript不关心操作的原因是因为您使用了错误的操作符。尝试使用==运算符来创建一个返回布尔值的表达式。 您可以引用运算符使用here

还要考虑条件语句,不要让页面变量超出你的algorythim所需的范围(例如-1)。 另外,请考虑在<body>代码

的末尾加载脚本