私は他の多くの投稿を読んでいますが、jQuery の経験が浅いために問題が発生していることは間違いありませんが、私が達成しようとしていることに近いことはたくさんあります。
ボタンの垂直ナビゲーション セットがある div があります。
その中に、ユーザーがクリックしたナビゲーション ボタンに基づいて表示または非表示になる他の div (子 div) が必要です。
これらのすべての div を画面上の同じ場所に配置したいので、基本的にはタブ付きフォームのようですが、垂直方向のナビゲーションがあります。
ボタンがクリックされたときと別のdivのボタンがクリックされたときに、各divの非表示と表示を実装する最善の方法を実際に理解することはできません。
これが私が持っているナビゲーションhtmlです
<div id="lowerDetail">
<div id="lowersectionmenu">
<ul>
<li><a href="#Notes" title="Notes">Notes</a></li>
<li><a href="#People" title="People">People</a></li>
<li><a href="#NextTab" title="Next Tab">Next Tab</a></li>
<li><a href="#LastTab" title="LastTab">Last Tab/a></li>
</ul>
</div>
<div id="Notes">
<form>
<input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="100" />
<button type="submit" class="noteEntryButton" id="sendNote" value="Submit" class="buttonAddNote">Submit Note</button>
</form>
</div>
<div id="People">
<form>
<input type="text" name="addName" id="addName" placeholder="Name" size="35" />
<input type="text" name="addPhone" id="addPhone" placeholde="XXX-XXX-XXXX" size="15" />
</form>
</div>
<div id="NextTab">Next Tab </div>
<div id="LastTab">Last Tab </div>
</div>
これは私が知っているかなり基本的なものですが、そのための CSS もここにあります。
#lowersectionmenu {
float:left;
width: 120px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}
#lowersectionmenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#lowersectionmenu li a:link, #lowersectionmenu li a:visited {
color: #5E7830;
display: block;
background: url(images/menu1.png);
padding: 8px 0 0 10px;
}
#lowersectionmenu li a:hover {
color: #26370A;
background: url(images/menu1.png) 0 -32px;
padding: 8px 0 0 10px;
}
#lowersectionmenu li a:active {
color: #26370A;
background: url(images/menu1.png) 0 -64px;
padding: 8px 0 0 10px;
}
#lowersectionmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.noteEntryField {
position:relative;
top:20px;
}
.noteEntryButton {
position:relative;
top:20px;
height:27px;
outline:none;
text-align:center;
background: #66ff33;
background: -webkit-gradient(linear, left top, left bottom, from(#66cc33), to(#669933));
background: -moz-linear-gradient(top, #66cc33, #669933);
font-size:14px;
border-radius:4px;
color:#606060;
text-shadow:2px 2px 2px #f0f0f0;
}
あとは、魔法を実現するための適切な jQuery コードが必要です。
すべての助けに感謝します。
答えとして与えられたjQueryを追加していますが、まだうまくいきません。誰かが何が悪いのか教えてくれるかもしれません。私が何をしても、すべての div が表示され、フォーム フィールドが積み上げられます。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#lowersectionmenu a').click(function() {
/* hide any previous active nav and remove activeClass, fails quietly if none found*/
$('.navActive').hide().removeClass('navActive');
/* create ID selector from this link */
var id = $(this).attr('href') /* or using native script this.href*/
/* will return string "#Notes" which is exactly the same as ID selector string for jQuery*/
/* show proper item and add active class used to find open element above*/
$(id).show().addClass('navActive');
return false; /* prevent browser default events for anchor tag */
});
</script>