1. 首頁
  2. 問答
  3. 如何讓一個div內的按鈕去一個新的div

如何讓一個div內的按鈕去一個新的div

2016-10-21 34 views
0

我嘗試做出某種給朋友的菜單。如何讓一個div內的按鈕去一個新的div

什麼代碼假設做的是以下幾點：

當您單擊按鈕彩虹之一是顯示通過切換可見/隱藏的類股利。到目前爲止這麼好，但現在我希望他們在div中有可用於導航diffrent div的按鈕。

這沒有成功....

從虹與「下一步」按鈕彩虹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";    
     } 
    }); 
});

這裏是TE碼的的jsfiddle例如：https://jsfiddle.net/sx273azf/6/ 這裏，你會發現有3個按鈕的菜單：

顯示非：不會顯示任何頁面

第2頁：顯示菜單，我需要固定在

第3頁：的一個例子通過div的/一個菜單導航工作代碼

PS：如果我可以改變我的代碼中的任何內容，請讓我知道，任何幫助表示讚賞。

來源

2016-10-21 Jurntje

+0

我是否認爲你的prev（-1）和你的下一個（+1）按鈕是你遇到的問題？ –

+0

@SimonPrice是的，你是對的，至少可以看到，那是什麼地方出問題的地方 – Jurntje

+0

好吧，有幾件事情可以改進，即時通過代碼現在看，但要老實說，你已經選擇了讓我頭痛的顏色，而且只能看着它們少於5分鐘。但是，有幾件事情可以做到。給我一些時間和生病我可以爲你做什麼，併發布回答 –

回答

1

我設法解決的下一個按鈕是這樣的：

的Javascript在你的jsfiddle的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]

訪問特定字母本質上，我只是創建了所有不同的彩虹字母數組，然後只匹配let在陣列中找到一個索引，並執行與單擊rainbowX按鈕時相同的操作。

的最後一步是對新的生產線213

next_rainbow()

我會留下，其餘由你執行next_rainbow（）函數 - 這是更做好操作方面的正確方向多個對象

來源

2016-10-22 01:25:37 mike510a

相關問題

 相關問題