到目前为止,我已经编写了这段代码-

<div class="yearly-archive">
    <p> YEAR -  <span class="archive-year year-active"> 2014 </span> /
        <span class="archive-year"> 2013 </span> /
        <span class="archive-year"> 2012 </span> /
        <span class="archive-year"> 2011 </span> /
        <span class="archive-year"> 2010 </span>
    </p>
</div>

<div class="news-container news-active" id="news-2014"></div>

<div class="news-container" id="news-2013"></div>

<div class="news-container" id="news-2012"></div>

<div class="news-container" id="news-2011"></div>

<script>
$('.archive-year').click(function() {
    $('.archive-year').removeClass('year-active');
    $(this).addClass('year-active');
});
</script>


小提琴:http://jsfiddle.net/codestor/C7xj6/2/

我正在尝试实现以下功能:

当我单击2013时,news-container的news-active应切换为id为news-2013的部门

需要帮助。

最佳答案

您想要做的几乎与链接相同。...从单击的链接中获取文本,然后使用该文本来构建ID选择器。由于单击了哪个链接,因此要使用$(this).text()捕获链接内的文本,因此您要确保使用.trim()删除了文本周围的所有多余空间。现在,您可以通过使用'#news-1' + <link text value>替换字符串来定位新闻div尝试...

$('.archive-year').click(function() {
  $('.archive-year').removeClass('year-active');
  $(this).addClass('year-active');
  $(".news-container").removeClass("news-active");
  $("#news-" + $(this).text().trim()).addClass("news-active");
});


Fiddle

10-05 21:04
查看更多