リンクをクリックし別ページに移動する際に、別ページでのコンテンツを指定して表示したいです。
現状、ページAとページBに分かれています。
このようなことは可能でしょうか?
ページA
ボタン1(リンク)→クリックするとページB:製品情報1(tab)が有効
ボタン2(リンク)→クリックするとページB:製品情報2(tab)が有効
ボタン3(リンク)→クリックするとページB:製品情報3(tab)が有効
html
1<div class="button"> 2 <a href="#" class="button-a"> 3 ボタン1 4 </a> 5 <a href="#" class="button-a"> 6 ボタン2 7 </a> 8 <a href="#" class="button-a"> 9 ボタン3 10 </a> 11</div> 12
ページB
製品情報1(tab)
製品情報2(tab)
製品情報3(tab)
※タブクリックでコンテンツの表示・非表示の切り替えの選択行っています。
html
1 2<div id="sampleButton"> 3 <input type="radio" id="radio1" name="radio" onclick="funcRed()" /><label for="radio1" class="botton1">製品情報1</label> 4 <input type="radio" id="radio2" name="radio" onclick="funcGreen()" /><label for="radio2" class="botton2">製品情報2</label> 5 <input type="radio" id="radio3" name="radio" onclick="funcBlue()" /><label for="radio3" class="botton3">製品情報3</label> 6</div> 7 8<div class-"contents"> 9 <div id="pg-263-1">...</div> 10 <div id="pg-263-2">...</div> 11 <div id="pg-263-3">...</div> 12 <div id="pg-263-4">...</div> 13 <div id="pg-263-5">...</div> 14 <div id="pg-263-6">...</div> 15 <div id="pg-263-7">...</div> 16 <div id="pg-263-8">...</div> 17 <div id="pg-263-9">...</div> 18 <div id="pg-263-10">...</div> 19 <div id="pg-263-11">...</div> 20 <div id="pg-263-12">...</div> 21 <div id="pg-263-13">...</div> 22 <div id="pg-263-14">...</div> 23 <div id="pg-263-15">...</div> 24</div>
Javascript
1<script type="text/javascript"> 2 3window.onload = function () { 4 document.getElementById( "radio1" ).click(); 5} 6function funcRed() { 7 document.getElementById("pg-263-1").style.display = "block"; 8 document.getElementById("pg-263-2").style.display = "block"; 9 document.getElementById("pg-263-3").style.display = "block"; 10 document.getElementById("pg-263-4").style.display = "block"; 11 document.getElementById("pg-263-5").style.display = "block"; 12 document.getElementById("pg-263-6").style.display = "none"; 13 document.getElementById("pg-263-7").style.display = "none"; 14 document.getElementById("pg-263-8").style.display = "none"; 15 document.getElementById("pg-263-9").style.display = "none"; 16 document.getElementById("pg-263-10").style.display = "none"; 17 document.getElementById("pg-263-11").style.display = "none"; 18 document.getElementById("pg-263-12").style.display = "none"; 19 document.getElementById("pg-263-13").style.display = "none"; 20 document.getElementById("pg-263-14").style.display = "none"; 21 document.getElementById("pg-263-15").style.display = "none"; 22} 23function funcGreen() { 24 document.getElementById("pg-263-1").style.display = "none"; 25 document.getElementById("pg-263-2").style.display = "none"; 26 document.getElementById("pg-263-3").style.display = "none"; 27 document.getElementById("pg-263-4").style.display = "none"; 28 document.getElementById("pg-263-5").style.display = "none"; 29 document.getElementById("pg-263-6").style.display = "block"; 30 document.getElementById("pg-263-7").style.display = "block"; 31 document.getElementById("pg-263-8").style.display = "block"; 32 document.getElementById("pg-263-9").style.display = "block"; 33 document.getElementById("pg-263-10").style.display = "block"; 34 document.getElementById("pg-263-11").style.display = "none"; 35 document.getElementById("pg-263-12").style.display = "none"; 36 document.getElementById("pg-263-13").style.display = "none"; 37 document.getElementById("pg-263-14").style.display = "none"; 38 document.getElementById("pg-263-15").style.display = "none"; 39} 40function funcBlue() { 41 document.getElementById("pg-263-1").style.display = "none"; 42 document.getElementById("pg-263-2").style.display = "none"; 43 document.getElementById("pg-263-3").style.display = "none"; 44 document.getElementById("pg-263-4").style.display = "none"; 45 document.getElementById("pg-263-5").style.display = "none"; 46 document.getElementById("pg-263-6").style.display = "none"; 47 document.getElementById("pg-263-6").style.display = "none"; 48 document.getElementById("pg-263-7").style.display = "none"; 49 document.getElementById("pg-263-8").style.display = "none"; 50 document.getElementById("pg-263-9").style.display = "none"; 51 document.getElementById("pg-263-10").style.display = "none"; 52 document.getElementById("pg-263-11").style.display = "block"; 53 document.getElementById("pg-263-12").style.display = "block"; 54 document.getElementById("pg-263-13").style.display = "block"; 55 document.getElementById("pg-263-14").style.display = "block"; 56 document.getElementById("pg-263-15").style.display = "block"; 57} 58</script>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。