1. ホーム
  2. 質問と答え
  3. 新しいdivに行くためにdiv内のボタンを作る方法

新しいdivに行くためにdiv内のボタンを作る方法

2016-10-21 1 views
0

私は友人のための何らかの種類のメニューを作ろうとしています。新しいdivに行くためにdiv内のボタンを作る方法

何のコードが行うことに想定されることは以下の通りです：

あなたはレインボーボタンのいずれかをクリックして表示/非表示のクラスを切り替えることによって、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";    
     } 
    }); 
});

ここでは、TEコードのJSFiddle例です。https://jsfiddle.net/sx273azf/6/ここあなたは3つのボタンとメニューを見つけることができます：

ショー以外：任意のページが表示されません

ページ2：示し、私は

ページ3に固定する必要がメニュー：例divの/メニューを使用したナビゲーションのための作業コード

PS：私のコードで何かを変更できる場合は、私に教えてください。

出典

2016-10-21 Jurntje

+0

あなたの前の（-1）ボタンと次の（+1）ボタンが問題を抱えていると思いますか？ –

+0

@SimonPriceはい、あなたは正しいですか、少なくとも遠くに見ることができます、それは何かが間違っている領域です。 – Jurntje

+0

ok、改善できるいくつかのことがあります。ただ今コードを見ていますが、あなたが私に頭痛を与えているときに選んだ色を正直にしてください。そして、5分以内に彼らを見ていただけです。しかし、できることがいくつかあります。私にあなたのためにできることをして、答えを投稿してください。 –

答えて

1

は、私はこのような次のボタンを修正するために管理：

のJavascriptのライン182には、あなたのjsfiddleに私はこの機能を追加しました：

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"; 

}

魔法が+演算子です。静的な文字列を動的要素と組み合わせるには、その間に+を挿入します。私は getElementById()関数の内部で"rbdiv" + all_rainbows[cur_rainbow]をした私の答えで

-

がall_rainbowsが手紙[A, B, C, D, E, F, G, H, I]
とcur_rainbowのリストであることを覚えているが、その後cur_rainbow++
とを使用することによって増加されますちょうど数でありますall_rainbows[cur_rainbow]

私はちょうどすべての異なる虹の文字の配列を作成した後、配列内のインデックスで整理し、rainbowXボタンをクリックしたときと同じ操作を行いました。

最後のステップは213

next_rainbow()

NEWライン上next_rainbow（）関数を実行することでした、私はあなた次第残りの部分を残しておきます - これは上の操作を行うという点で右方向よりあります複数のオブジェクト

出典

2016-10-22 01:25:37 mike510a

関連する問題

 関連する問題