如何使div内的按钮转到新的div

Question

我试图为朋友制作某种菜单。

代码的作用如下：

当您单击其中一个彩虹按钮时，通过切换可见/隐藏类来显示div。到目前为止一切顺利，但现在我希望他们在div中设置按钮，可用于浏览不同的div。

这没有成功......

从彩虹A到彩虹B与＆＃34; next＆＃34;按钮正在工作。但只有一次，之后它决定崩溃....有人可以帮我解决这个问题。或者只是把我推向正确的方向。

我知道我的代码可能不是您见过的最好的代码，但我并不担心这一点。

代码：

HTML

<!-- Page 2 -->
<div id="page_2" class="pages hidden">
    <div id="rbHeader" class="triggerDiv">
        <h1 style="color: grey;"><b><i>Page: <span style="color: white;">2</span></i></b></h1>
        <p><b>Menu le Patty</b></p>
        <div id="buttonRijC">
            <button id="rbknopA" class="rainbow_buttons" value="rbA" style="background-color: purple;">Rainbow A</button>
            <button id="rbknopB" class="rainbow_buttons" value="rbB" style="background-color: blue;">Rainbow B</button>
            <button id="rbknopC" class="rainbow_buttons" value="rbC" style="background-color: lightblue;">Rainbow C</button>
            <button id="rbknopD" class="rainbow_buttons" value="rbD" style="background-color: lightgreen;">Rainbow D</button>
            <button id="rbknopE" class="rainbow_buttons" value="rbE" style="background-color: green;">Rainbow E</button>
            <button id="rbknopF" class="rainbow_buttons" value="rbF" style="background-color: yellow;">Rainbow F</button>
            <button id="rbknopG" class="rainbow_buttons" value="rbG" style="background-color: orange;">Rainbow G</button>
            <button id="rbknopH" class="rainbow_buttons" value="rbH" style="background-color: pink;">Rainbow H</button>
            <button id="rbknopI" class="rainbow_buttons" value="rbI" style="background-color: red;">Rainbow I</button>
        </div>
    </div>
        <div id="rbDivs">
            <div id="rbdivA" class="rainbow_divs hidden first" style="background-color: purple;">
                <h1>RAINBOW <span style="color: white;">A</span></h1>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt dignissim urna, non commodo nisi lacinia vel. Nulla facilisi. Nulla molestie faucibus lacus ut luctus. Donec aliquet, massa ac luctus tempor, odio odio ultrices sapien, gravida porta eros dolor eget enim. Sed a congue mauris. Pellentesque ornare ipsum quis odio.</p>
                <br />
                <button id="rbTerug" class="rbMenu" value="rbBack">Back to buttons</button>
                <button id="rbVorige" disabled="disabled" class="rbMenu" value="rbPrev">Prev (-1)</button>
                <button id="rbVolgende" class="rbMenu" value="rbNext">Next (+1)</button>
                <br /><br />
            </div>

            <div id="rbdivB" class="rainbow_divs hidden" style="background-color: blue;">
                <h1>RAINBOW <span style="color: white;">B</span></h1>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt dignissim urna, non commodo nisi lacinia vel. Nulla facilisi. Nulla molestie faucibus lacus ut luctus. Donec aliquet, massa ac luctus tempor, odio odio ultrices sapien, gravida porta eros dolor eget enim. Sed a congue mauris. Pellentesque ornare ipsum quis odio.</p>
                <br />
                <button id="rbTerug" class="rbMenu" value="rbBack">Back to buttons</button>
                <button id="rbVorige" disabled="disabled" class="rbMenu" value="rbPrev">Prev (-1)</button>
                <button id="rbVolgende" class="rbMenu" value="rbNext">Next (+1)</button>
                <br /><br />                    
            </div>

            <div id="rbdivC" class="rainbow_divs hidden" style="background-color: lightblue;">
                <h1>RAINBOW <span style="color: white;">C</span></h1>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt dignissim urna, non commodo nisi lacinia vel. Nulla facilisi. Nulla molestie faucibus lacus ut luctus. Donec aliquet, massa ac luctus tempor, odio odio ultrices sapien, gravida porta eros dolor eget enim. Sed a congue mauris. Pellentesque ornare ipsum quis odio.</p>
                <br />
                <button id="rbTerug" class="rbMenu" value="rbBack">Back to buttons</button>
                <button id="rbVorige" disabled="disabled" class="rbMenu" value="rbPrev">Prev (-1)</button>
                <button id="rbVolgende" class="rbMenu" value="rbNext">Next (+1)</button>
                <br /><br />                    
            </div>

            <div id="rbdivD" class="rainbow_divs hidden" style="background-color: lightgreen;">
                <h1>RAINBOW <span style="color: white;">D</span></h1>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt dignissim urna, non commodo nisi lacinia vel. Nulla facilisi. Nulla molestie faucibus lacus ut luctus. Donec aliquet, massa ac luctus tempor, odio odio ultrices sapien, gravida porta eros dolor eget enim. Sed a congue mauris. Pellentesque ornare ipsum quis odio.</p>
                <br />
                <button id="rbTerug" class="rbMenu" value="rbBack">Back to buttons</button>
                <button id="rbVorige" disabled="disabled" class="rbMenu" value="rbPrev">Prev (-1)</button>
                <button id="rbVolgende" class="rbMenu" value="rbNext">Next (+1)</button>
                <br /><br />                    
            </div>

            <div id="rbdivE" class="rainbow_divs hidden" style="background-color: green;">
                <h1>RAINBOW <span style="color: white;">E</span></h1>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt dignissim urna, non commodo nisi lacinia vel. Nulla facilisi. Nulla molestie faucibus lacus ut luctus. Donec aliquet, massa ac luctus tempor, odio odio ultrices sapien, gravida porta eros dolor eget enim. Sed a congue mauris. Pellentesque ornare ipsum quis odio.</p>
                <br />
                <button id="rbTerug" class="rbMenu" value="rbBack">Back to buttons</button>
                <button id="rbVorige" disabled="disabled" class="rbMenu" value="rbPrev">Prev (-1)</button>
                <button id="rbVolgende" class="rbMenu" value="rbNext">Next (+1)</button>
                <br /><br />                    
            </div>

            <div id="rbdivF" class="rainbow_divs hidden" style="background-color: yellow;">
                <h1>RAINBOW <span style="color: white;">F</span></h1>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt dignissim urna, non commodo nisi lacinia vel. Nulla facilisi. Nulla molestie faucibus lacus ut luctus. Donec aliquet, massa ac luctus tempor, odio odio ultrices sapien, gravida porta eros dolor eget enim. Sed a congue mauris. Pellentesque ornare ipsum quis odio.</p>
                <br />
                <button id="rbTerug" class="rbMenu" value="rbBack">Back to buttons</button>
                <button id="rbVorige" disabled="disabled" class="rbMenu" value="rbPrev">Prev (-1)</button>
                <button id="rbVolgende" class="rbMenu" value="rbNext">Next (+1)</button>
                <br /><br />                    
            </div>

            <div id="rbdivG" class="rainbow_divs hidden" style="background-color: orange;">
                <h1>RAINBOW <span style="color: white;">G</span></h1>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt dignissim urna, non commodo nisi lacinia vel. Nulla facilisi. Nulla molestie faucibus lacus ut luctus. Donec aliquet, massa ac luctus tempor, odio odio ultrices sapien, gravida porta eros dolor eget enim. Sed a congue mauris. Pellentesque ornare ipsum quis odio.</p>
                <br />
                <button id="rbTerug" class="rbMenu" value="rbBack">Back to buttons</button>
                <button id="rbVorige" disabled="disabled" class="rbMenu" value="rbPrev">Prev (-1)</button>
                <button id="rbVolgende" class="rbMenu" value="rbNext">Next (+1)</button>
                <br /><br />                    
            </div>

            <div id="rbdivH" class="rainbow_divs hidden" style="background-color: pink;">
                <h1>RAINBOW <span style="color: white;">H</span></h1>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt dignissim urna, non commodo nisi lacinia vel. Nulla facilisi. Nulla molestie faucibus lacus ut luctus. Donec aliquet, massa ac luctus tempor, odio odio ultrices sapien, gravida porta eros dolor eget enim. Sed a congue mauris. Pellentesque ornare ipsum quis odio.</p>
                <br />
                <button id="rbTerug" class="rbMenu" value="rbBack">Back to buttons</button>
                <button id="rbVorige" disabled="disabled" class="rbMenu" value="rbPrev">Prev (-1)</button>
                <button id="rbVolgende" class="rbMenu" value="rbNext">Next (+1)</button>
                <br /><br />                    
            </div>

            <div id="rbdivI" class="rainbow_divs hidden last" style="background-color: red;">
                <h1>RAINBOW <span style="color: white;">I</span></h1>
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt dignissim urna, non commodo nisi lacinia vel. Nulla facilisi. Nulla molestie faucibus lacus ut luctus. Donec aliquet, massa ac luctus tempor, odio odio ultrices sapien, gravida porta eros dolor eget enim. Sed a congue mauris. Pellentesque ornare ipsum quis odio.</p>
                <br />
                <button id="rbTerug" class="rbMenu" value="rbBack">Back to buttons</button>
                <button id="rbVorige" disabled="disabled" class="rbMenu" value="rbPrev">Prev (-1)</button>
                <button id="rbVolgende" class="rbMenu" value="rbNext">Next (+1)</button>
                <br /><br />                    
            </div>
        </div>
</div>

CSS

    /* Page 2 */
/* page 2 div's */
#rbdivA, #rbdivB, #rbdivC, #rbdivD, #rbdivE, #rbdivF, #rbdivG, #rbdivH, #rbdivI {
    box-shadow: 10px 10px 5px grey;
}
.rainbow_buttons {
    width: 250px;
    height: 50px;
    border: none;
    color: white;
    display: inline-block;
}
#rbTerug, #rbVolgende, #rbVorige {
/*  background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    border-left: 3px solid white;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    font-size: 20px;
    font-weight: 900;
    position: relative;
    left: 25%; */
    border-left: 3px solid green;
    background-color: grey;
    color: green;
    cursor: pointer;
}
#rbTerug:disabled, #rbVolgende:disabled, #rbVorige:disabled {
    color: red;
    cursor: no-drop;
    border-left: 3px solid red;
}

使用Javascript / jQuery的

//Page 2 scripts
//page 2 rainbow buttons
$(function rainbowButton(){
    var $theRainbow = $(".rainbow_buttons");
    var showRainbowA = document.getElementById("rbdivA");
    var showRainbowB = document.getElementById("rbdivB");
    var showRainbowC = document.getElementById("rbdivC");
    var showRainbowD = document.getElementById("rbdivD");
    var showRainbowE = document.getElementById("rbdivE");
    var showRainbowF = document.getElementById("rbdivF");
    var showRainbowG = document.getElementById("rbdivG");
    var showRainbowH = document.getElementById("rbdivH");
    var showRainbowI = document.getElementById("rbdivI");
    var getHeader = document.getElementById("rbHeader");

    $theRainbow.click(function() {
        if(this.value == "rbA"){    
            showRainbowA.className = "visible current first";
            showRainbowB.className = "hidden";
            showRainbowC.className = "hidden";
            showRainbowD.className = "hidden";
            showRainbowE.className = "hidden";
            showRainbowF.className = "hidden";
            showRainbowG.className = "hidden";
            showRainbowH.className = "hidden";
            showRainbowI.className = "hidden last";
            getHeader.className = "hidden";
        } else if (this.value == "rbB") {
                showRainbowA.className = "hidden first";
                showRainbowB.className = "visible current";
                showRainbowC.className = "hidden";
                showRainbowD.className = "hidden";
                showRainbowE.className = "hidden";
                showRainbowF.className = "hidden";
                showRainbowG.className = "hidden";
                showRainbowH.className = "hidden";
                showRainbowI.className = "hidden last";
                getHeader.className = "hidden";
        } else if (this.value == "rbC") {
                showRainbowA.className = "hidden first";
                showRainbowB.className = "hidden";
                showRainbowC.className = "visible current";
                showRainbowD.className = "hidden";
                showRainbowE.className = "hidden";
                showRainbowF.className = "hidden";
                showRainbowG.className = "hidden";
                showRainbowH.className = "hidden";
                showRainbowI.className = "hidden last";
                getHeader.className = "hidden";
        } else if (this.value == "rbD") {
                showRainbowA.className = "hidden first";
                showRainbowB.className = "hidden";
                showRainbowC.className = "hidden";
                showRainbowD.className = "visible current";
                showRainbowE.className = "hidden";
                showRainbowF.className = "hidden";
                showRainbowG.className = "hidden";
                showRainbowH.className = "hidden";
                showRainbowI.className = "hidden last"
                getHeader.className = "hidden";             
        } else if (this.value == "rbE") {
                showRainbowA.className = "hidden first";
                showRainbowB.className = "hidden";
                showRainbowC.className = "hidden";
                showRainbowD.className = "hidden";
                showRainbowE.className = "visible current";
                showRainbowF.className = "hidden";
                showRainbowG.className = "hidden";
                showRainbowH.className = "hidden";
                showRainbowI.className = "hidden last";
                getHeader.className = "hidden";
        } else if (this.value == "rbF") {
                showRainbowA.className = "hidden first";
                showRainbowB.className = "hidden";
                showRainbowC.className = "hidden";
                showRainbowD.className = "hidden";
                showRainbowE.className = "hidden";
                showRainbowF.className = "visible current";
                showRainbowG.className = "hidden";
                showRainbowH.className = "hidden";
                showRainbowI.className = "hidden last";
                getHeader.className = "hidden";
        } else if (this.value == "rbG") {
                showRainbowA.className = "hidden first";
                showRainbowB.className = "hidden";
                showRainbowC.className = "hidden";
                showRainbowD.className = "hidden";
                showRainbowE.className = "hidden";
                showRainbowF.className = "hidden";
                showRainbowG.className = "visible current";
                showRainbowH.className = "hidden";
                showRainbowI.className = "hidden last";
                getHeader.className = "hidden";
        } else if (this.value == "rbH") {
                showRainbowA.className = "hidden first";
                showRainbowB.className = "hidden";
                showRainbowC.className = "hidden";
                showRainbowD.className = "hidden";
                showRainbowE.className = "hidden";
                showRainbowF.className = "hidden";
                showRainbowG.className = "hidden";
                showRainbowH.className = "visible current";
                showRainbowI.className = "hidden last";
                getHeader.className = "hidden";
        } else {
                showRainbowA.className = "hidden first";
                showRainbowB.className = "hidden";
                showRainbowC.className = "hidden";
                showRainbowD.className = "hidden";
                showRainbowE.className = "hidden";
                showRainbowF.className = "hidden";
                showRainbowG.className = "hidden";
                showRainbowH.className = "hidden";
                showRainbowI.className = "visible current last";
                getHeader.className = "hidden";
        }
    });
});
//page 2 buttons inside hidden div's
$(function rbMenuback(){
    var $theMenu = $(".rbMenu");

    var showRainbowA = document.getElementById("rbdivA");
    var showRainbowB = document.getElementById("rbdivB");
    var showRainbowC = document.getElementById("rbdivC");
    var showRainbowD = document.getElementById("rbdivD");
    var showRainbowE = document.getElementById("rbdivE");
    var showRainbowF = document.getElementById("rbdivF");
    var showRainbowG = document.getElementById("rbdivG");
    var showRainbowH = document.getElementById("rbdivH");
    var showRainbowI = document.getElementById("rbdivI");

    var getOut = document.getElementById("rbOut");
    var getNext = document.getElementById("rbVolgende");
    var getHeader = document.getElementById("rbHeader");

    $theMenu.click(function() {
        if (this.value == "rbNext") {
            $('#rbVolgende').click(function() {
    $('.current').removeClass('visible').addClass('hidden').removeClass('current')
        .next().removeClass('hidden').addClass('visible').addClass('current');
    if ($('.current').hasClass('last')) {
        $('#rbVolgende').attr('disabled', true);
    }
    $('#rbVorige').attr('disabled', null);
});
        } else if (this.value == "rbPrev") {
                $('#rbVorige').click(function() {
            $('.current').removeClass('visible').addClass('hidden').removeClass('current')
                        .prev().removeClass('hidden').addClass('visible').addClass('current');
                if ($('.current').hasClass('first')) {
                $('#rbVorige').attr('disabled', true);
                    }
            $('#rbVolgende').attr('disabled', null);
                });
        } else {
                getHeader.className = "triggerDiv visible";
                showRainbowA.className = "hidden first";
                showRainbowB.className = "hidden";
                showRainbowC.className = "hidden";
                showRainbowD.className = "hidden";
                showRainbowE.className = "hidden";
                showRainbowF.className = "hidden";
                showRainbowG.className = "hidden";
                showRainbowH.className = "hidden";
                showRainbowI.className = "hidden last";             
        }
    });
});

这是一个代码的JSFiddle示例：https://jsfiddle.net/sx273azf/6/ 在这里，您将找到一个包含3个按钮的菜单：

显示非：不会显示任何页面

第2页：显示我需要修复的菜单

第3页：通过div / s菜单

导航的工作代码示例

PS：如果我可以更改代码中的任何内容，请告知我们，我们非常感谢您的帮助。

Answer 1

我设法修复了这样的Next Button：

在jsfiddle的Javascript第182行，我添加了这个函数：

var cur_rainbow = 0;
var all_rainbows = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];

function next_rainbow() {
     document.getElementById("rbdiv" + all_rainbows[cur_rainbow]).className = "hidden";
     cur_rainbow++;
     if (cur_rainbow >= all_rainbows.length) {
        cur_rainbow--;
     }
     document.getElementById("rbdiv" + all_rainbows[cur_rainbow]).className = "visible current";

}

魔法在 + 运算符中。您可以通过在它们之间放置一个+来将静态字符串与动态元素组合在一起。

在我的回答中，我做了"rbdiv" + all_rainbows[cur_rainbow]  getElementById()功能 -

请记住all_rainbows是一个字母[A, B, C, D, E, F, G, H, I]的列表 cur_rainbow只是一个使用cur_rainbow++增加的数字 然后通过all_rainbows[cur_rainbow]

访问特定的字母

基本上我只创建了一个包含所有不同彩虹字母的数组，然后将字母与数组中的索引匹配，并执行与单击rainbowX按钮时相同的操作。

最后一步是在NEW line 213上执行next_rainbow（）函数

next_rainbow()

我将其余部分留给您 - 这是对多个对象进行操作的更正确方向