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

标签 javascript jquery html css jsfiddle

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

代码应该做的如下:

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

这没有成功....

使用“下一步”按钮从彩虹 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 的菜单导航的工作代码示例

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

最佳答案

我设法像这样修复了 Next 按钮:

在您的 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()

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

关于javascript - 如何使div中的按钮转到新的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40178676/

上一篇：css - 如何使用 CSS 降低 2 行菜单项的行高？

下一篇：html - 在 Bootstrap 日期时间控件上选择周末

相关文章：

javascript - 如何在主线程和网络 worker 之间共享 pouchDB

javascript - JQuery 在使用 Durandal 的 compose 时不定位 DOM 元素

jquery - 如何检查 td 是否为 :nth-child(3) is greater than or equal to a percentage?

html - 在使用剪辑路径的 svg 矩形元素上重复背景图像

jquery - 禁用单击每行中的最后一列

javascript - 从 jQuery 回到 PHP

javascript - Javascript 中的事件循环是否在单独的线程中执行？

Javascript按随机百分比执行函数

javascript - 修改 DIV insideHTML 去除表格标签

php - 在 javascript 和 php 之间来回传递表单 ID 作为变量

©2024 IT工具网  联系我们