到目前为止,我已经编写了这段代码-
<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