Question

我将如何继续在点击时向li class ='active'添加一个类，并且在页面加载时默认情况下第一个li（概述）处于活动状态？

<ul>
    <li><a href="#" onclick="showdiv('overview');">Overview</a></li>
    <li><a href="#" onclick="showdiv('reviews');">Reviews</a></li>
    <li><a href="#" onclick="showdiv('news');">News</a></li>    
    <li><a href="#" onclick="showdiv('gallery');">Gallery</a></li>
</lu>

<div id='overview' style='display: none;'>
<!-- overview content -->
</div>   

<div id='articles' style='display: none;'>
<!-- arcticles content -->
</div>   

<div id='news' style='display: none;'>
<!-- news content -->
</div>   

<div id='gallery' style='display: none;'>
<!-- gallery content -->
</div>   

<script type="text/javascript">
function showdiv(id){
    document.getElementById(id).style.display = "block";
}
</script>

Answer 1

如果你还没有使用jQuery，你应该考虑使用它。这真的让这些更容易。

严格来说，这是一种方式:(未经测试）

<ul>
<li><a href="#" onclick="showdiv('overview', this);">Overview</a></li>
<li><a href="#" onclick="showdiv('reviews', this);">Reviews</a></li>
<li><a href="#" onclick="showdiv('news', this);">News</a></li>    
<li><a href="#" onclick="showdiv('gallery', this);">Gallery</a></li>
</ul>

<div id='overview' style='display: none;'>
<!-- overview content -->
</div>   

<div id='articles' style='display: none;'>
<!-- arcticles content -->
</div>   

<div id='news' style='display: none;'>
<!-- news content -->
</div>   

<div id='gallery' style='display: none;'>
<!-- gallery content -->
</div>   

<script type="text/javascript">
function showdiv(id, a){
    if (window.activeA != undefined) {
        window.activeA.className = '';  // delcare window.activeA, if not already exists
    }

    document.getElementById(id).style.display = "block";
    a.className = 'active';
    window.activeA = a;
}
</script>

Answer 2

这是一个 Quick JSFiddle Demo ，它演示了在纯JavaScript中交换classNames和显示div。

var toggleDiv = function(self, id) {
    var li = self.parentNode,
        contents = document.getElementsByClassName('content'),
        menu = document.getElementById('menu'),
        children = menu.children,
        child = undefined,
        i = 0;

    // Loop over all content divs and show the active and hide all others.
    for (i = 0; i < contents.length; i++)
        contents[i].style.display = contents[i].id == id ? 'block' : 'none';

    // Loop over all menu items and add active class to the selected
    // and remove from others if applicable.
    for (i = 0; i < children.length; i++) {
        child = children[i];

        if (child === li) {
            child.className = (child.className + ' active').trim();
        } else {
            if (child.className.indexOf('active') > -1) {
                child.className = child.className.replace('active', '').trim();
            }
        }
    }
}

<ul id="menu">
    <li><a href="#" onClick="toggleDiv(this, 'overview');">Overview</a></li>
    <li><a href="#" onClick="toggleDiv(this, 'reviews');">Reviews</a></li>
    <li><a href="#" onClick="toggleDiv(this, 'news');">News</a></li>
    <li><a href="#" onClick="toggleDiv(this, 'gallery');">Gallery</a></li>
</ul>
<div id="overview" class="content">Overview...</div>
<div id="reviews" class="content">Reviews...</div>
<div id="news" class="content">News...</div>
<div id="gallery" class="content">Gallery...</div>

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    position: relative;
    display: inline-block;
    width: 80px;
    background: #4679BD;
    color: #FFFFFF;
    text-align: center;
}
li>a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}
.content {
    display: none;
}
.active {
    background: #064CA8;
}

将课程添加到li onclick

2 个答案: