サイドバーのあるページをまとめました。サイドバーのメニューをクリックすると、div が表示/非表示になります。
http://www.prostatecymru.com/prostate/
サイドのメニューは、次のコードを使用しています。
<div class="buttons">
<ul id="menu-profile" class="menu">
<li><a class="button" id="showdiv1">Show Div 1</a></li>
<li><a class="button" id="showdiv2">Show Div 2</a></li>
<li><a class="button" id="showdiv2">Show Div 2</a></li>
</ul>
</div>
そして、主なコンテンツはこのコードを使用しています:
<div id="div1">
Content Div 1
</div>
<div id="div2" style="display: none;">
Content Div 2
</div>
<div id="div3" style="display: none;">
Content Div 3
</div>
そして、使用されているjQueryは次のとおりです。
<script type="text/javascript">
$(function() {
$('#showdiv1').click(function() {
$('div[id^=div]').hide();
$('#div1').show();
});
$('#showdiv2').click(function() {
$('div[id^=div]').hide();
$('#div2').show();
});
$('#showdiv3').click(function() {
$('div[id^=div]').hide();
$('#div3').show();
});
});
</script>
それは私が望んでいることとまったく同じですが、1つのことです。a
ユーザーが表示するセクションを選択したときに、メニュー内を強調表示したいだけです。私の考えは、選択したアイテムの.selected
代わりに使用することです。見た目がカッコイイ最初の項目に.button
設定できますが、リンクを変更すると実際に選択された項目に移動するようにしたいです。これどうやってするの。私はいくつかのガイドを読みましたが、それはまさに私が望むものではないか、機能しません。.selected
.selected
これについて何か助けていただければ幸いです。
ありがとう