0

サイドバーのあるページをまとめました。サイドバーのメニューをクリックすると、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

これについて何か助けていただければ幸いです。

ありがとう

4

3 に答える 3

1

div の表示/非表示に使用しているのと同じ方法を使用してください。

$('#showdiv1').click(function() {
    $('div[id^=div]').hide();
    $('#div1').show();

    $('a[id^=showdiv]').removeClass('selected');
    $(this).addClass('selected');
});
于 2012-11-14T09:42:24.313 に答える
0

基本的なアイデアはありますが、リファクタリングはほとんどありません。

http://jsfiddle.net/s7E3z/

$('.menu a').on('click', function(e) {
    e.preventDefault();
    showdiv(this);
    $('.menu a').removeClass('selected');
    $(this).addClass('selected');
});

$('.menu a:eq(0)').click();

function showdiv(sender) {
    var idTarget = sender.id.replace('show','');
     $('.container div').removeClass('selected');
    $('#'+idTarget ).addClass('selected');
}
于 2012-11-14T09:52:58.730 に答える
0

ローストが示唆したように、コードをリファクタリングしてから新しい機能を追加してみてください。ここに簡単なスニペットがあります (html が少し変更されています):

$(".button").click(function() {
    var idNumber = $(this).attr("id").replace("show", "");
    $(".display").hide();
    $("#div" + idNumber).show();
    $(".button").removeClass("selected");
    $(this).addClass("selected");
});

ここで動作するフィドルのデモ

于 2012-11-14T09:53:16.170 に答える