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

Question

我正在尝试为朋友制作某种菜单。

代码的作用如下：

当您单击其中一个彩虹按钮时，会通过切换 visible/hidden class 来显示 div。到目前为止一切顺利，但现在我希望它们在 div 内有按钮，可用于浏览不同的 div。

这没有成功....

使用 "next" 按钮从彩虹 A 到彩虹 B 正在工作。但只有一次，在那之后它决定崩溃......请有人帮我解决这个问题。或者只是把我推向正确的方向。

我知道我的代码可能不是你见过的最好的，但我不太担心。

代码：

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 个按钮的菜单：

show non : 不会显示任何页面

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

第 3 页：通过 div's/a 菜单导航的工作代码示例

PS：如果我可以更改我的代码中的任何内容，请告诉我，我们将不胜感激。

Answer 1

我设法像这样修复了下一个按钮：

在你的 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 按钮时相同的操作。

最后一步是在新行 213

上执行 next_rainbow() 函数

next_rainbow()

我会把剩下的留给你——就对多个对象进行操作而言，这是更正确的方向

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

How to make buttons within a div to go to a new div

html

javascript

css

jquery

jsfiddle