Добавить класс в li onclick

Question

Как я могу добавить класс в класс li = '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.

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; 
}