點擊jquery更改類

我已經放在一起有一個側欄的頁面，當你點擊側欄中的菜單時，它會顯示/隱藏div。點擊jquery更改類

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>

它完全按照我想要的但只有一件事。我只想當菜單中的a在用戶選擇要顯示的部分時突出顯示。我的想法是在選定的項目上使用.selected而不是.button。我可以爲第一個項目設置.selected，看起來很酷，但我希望當您更改.selected的鏈接以移至實際選定的項目時。我怎樣才能做到這一點。我已閱讀了一些指南，但這不完全是我想要的，或者它不起作用。

我真的很感謝這方面的幫助。

感謝

來源

2012-11-14 Dan Davies

你應該先重構代碼 –

你的HTML都使用相同ID兩次...也許複製/粘貼問題？ – devnull69

只需使用您正在使用顯示/同樣的方法隱藏的div：

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

    $('a[id^=showdiv]').removeClass('selected'); 
    $(this).addClass('selected'); 
});

來源

2012-11-14 09:42:24 FixMaker

真棒 - 做了我想要的 - 非常感謝你。愛它。 –

生成的代碼大約有20行，並且只會在演示中處理3個div，如果您想添加更多的div，則可以添加更多可以呈指數級增長的代碼。使用來自roasted的答案或我自己的代碼將會看到一個更加模塊化，簡潔的代碼庫。 –

的基本思想是存在的，很少重構：

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-14 09:52:58

你應該嘗試，正如烘烤建議，重構你的代碼，然後添加新的功能。這裏是一個快速片段（以稍微改變的HTML）：

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

和工作小提琴演示here

來源

2012-11-14 09:53:16

點擊jquery更改類

回答

相關問題