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

Question

我正在尝试更改链接点击时的当前选项卡。我有这样的东西:

因此，当我单击下一个或上一个链接时，我想更改事件选项卡。我想这可以用 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/