Question

我正在尝试更改链接点击上的当前标签。我有这样的事情：

enter image description here

因此，当我点击下一个或上一个链接时，我想更改活动标签。我想这可以在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中获取列表元素：

有人可以帮我解决这个问题，或者给我一个建议，告诉我这是一种最简单或最好的方式来完成这类任务吗？谢谢！

Answer 1

有很多方法可以完成此任务。我试图让它尽可能简单，并添加了评论，以便您了解每一行。

使用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/

Answer 2

您要做的是在点击链接时调用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();
});

Answer 3

试

$(".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

使用JavaScript更改链接点击时的当前列表元素

3 个答案: