我正在尝试更改链接点击上的当前标签。我有这样的事情:
因此,当我点击下一个或上一个链接时,我想更改活动标签。 我想这可以在JavaScript中完成,但由于我是初学者,我只能完成最简单的任务。
这是用于构建此部分页面的HTML:
<div class="grey-box-wrap">
<div class="top">
<a href="javascript:;" class="prev"><i></i>previous week</a>
<span class="center">February 04 - February 10, 2013 (week 6)</span>
<a href="javascript:;" class="next">next week<i></i></a>
</div>
<div class="bottom">
<ul class="days">
<li>
<a href="javascript:;">
<b>Feb 04</b>
<!-- <i>7.5</i> -->
<span>monday</span>
</a>
</li>
<li>
<a href="javascript:;">
<b>Feb 06</b>
<!-- <i>7.5</i> -->
<span>tuesday</span>
</a>
</li>
<li>
<a href="javascript:;">
<b>Feb 06</b>
<!-- <i>7.5</i> -->
<span>wednesday</span>
</a>
</li>
<li class="active">
<a href="javascript:;">
<b>Feb 07</b>
<!-- <i>7.5</i> -->
<span>thursday</span>
</a>
</li>
<li>
<a href="javascript:;">
<b>Feb 08</b>
<!-- <i>7.5</i> -->
<span>friday</span>
</a>
</li>
<li>
<a href="javascript:;">
<b>Feb 09</b>
<!-- <i>0.0</i> -->
<span>saturday</span>
</a>
</li>
<li class="last">
<a href="javascript:;">
<b>Feb 10</b>
<!-- <i>0.0</i> -->
<span>sunday</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row-wrapper">
这是CSS:
.grey-box-wrap .bottom .days li.active a, .grey-box-wrap .bottom .days li:hover a {
color: white;
}
.grey-box-wrap .bottom .days li a {
color: #666666;
}
.grey-box-wrap .top {
height: 40px;
line-height: 40px;
padding: 0 10px;
overflow: hidden;
border-bottom: 1px solid white;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grey-box-wrap .top .prev {
float: left;
}
.grey-box-wrap .top .next {
float: right;
text-align: right;
}
.grey-box-wrap .top .prev, .grey-box-wrap .top .next {
width: 25%;
color: #f1592a;
display: inline-block;
font-weight: bold;
}
.grey-box-wrap .bottom .days li.active, .grey-box-wrap .bottom .days li:hover {
border: solid 1px #f1592a;
}
.grey-box-wrap .bottom .days li {
float: left;
margin-right: 2px;
width: 99px;
padding: 5px;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-ms-border-radius: 5px 5px 0 0;
-o-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
border: 1px solid #bdbdbd;
border-bottom: none;
background: white;
}
这是我尝试在JS中获取列表元素:
有人可以帮我解决这个问题,或者给我一个建议,告诉我这是一种最简单或最好的方式来完成这类任务吗? 谢谢!
答案 0 :(得分:3)
有很多方法可以完成此任务。我试图让它尽可能简单,并添加了评论,以便您了解每一行。
使用jQuery尝试类似的东西:
$(document).ready(function() { // check document is ready
$('li a').click(function() { // catch a click on a list link
$('li').removeClass('active'); // remove all current instances of active
$(this).parent().addClass('active'); // add the class active to the item you clicked
});
});
您可以在此处查看示例:http://jsfiddle.net/dbr8dxmu/
答案 1 :(得分:1)
您要做的是在点击链接时调用javascript代码,找到要突出显示的下一个元素。例如,当您单击要用于将活动选项卡更改为下一个选项卡的链接“下一步”时,您的代码可能如下所示:
var tabs = $("days li"); //get all your tabs
var firstTab= $(tabs[0]); //this represents the first tab
tabs.each(function(index){
if($(this).hasClass('active'){
$(this).toggleClass(active);
if(index < tabs.length - 1){
//the active tab has a next tab following it, activate it
$(tabs[index+1]).toggleClass('active');
return false;
} else{
//the last tab was the active tab, so we have to start from the first tab
firstTab.toggleClass('active');
return false
}
}
});
现在您可以将其放入函数selectNextTab
并告诉您的浏览器在您点击链接时调用此函数。如果您有其他按钮应该在不同的地方做同样的事情,请确保他们有“下一个”课程。
$(".next").click(function () {
selectNextTab();
});
答案 2 :(得分:1)
试
$(".next").click(function () {
var currntIndex = $(".active").index();
if (currntIndex < $(".days>li").length-1) {
$(".active").next("li").addClass("active");
$("li").eq(currntIndex).removeClass("active");
}
});
$(".prev").click(function () {
var currntIndex = $(".active").index();
if (currntIndex) {
$(".active").prev("li").addClass("active");
$("li").eq(currntIndex).removeClass("active");
}
});
<强> DEMO 强>