<style>
<style>
a{ width:100px; height:100px; background:#CCC;}
.bb{ width:100px; height:100px; background:#666}
</style>
<div><a href="#">2</a><a href="#">3</a><a href="#">5</a></div>点击2,给2附加样式aa,其他都不变,
点击3,给3附加样式aa,其它回复默认样式.

解决方案 »

  1.   

    <style>
    <style>
    a{ width:100px; height:100px; background:#CCC;}
    .bb{ width:100px; height:100px; background:#666}
    </style>
    <div id="dv"><a href="#">2</a><a href="#">3</a><a href="#">5</a></div>
    <script type="text/javascript">
        window.onload = function () {
            var as = document.getElementById('dv').getElementsByTagName('a');
            for (var i = 0, j = as.length; i < j; i++)
                as[i].onclick = function () {                for (var i = 0, j = as.length; i < j; i++) as[i].className = '';
                    this.className = 'bb';
                }
        }
    </script>
      

  2.   

    <style>
    <style>
    a{ width:100px; height:100px; background:#CCC;}
    .bb{ width:100px; height:100px; background:#666}
    </style>
    <div id="dv"><a href="#">2</a><a href="#">3</a><a href="#">5</a></div>
    <script type="text/javascript">
        window.onload = function () {
            var as = document.getElementById('dv').getElementsByTagName('a');
            for (var i = 0, j = as.length; i < j; i++)
                as[i].onclick = function () {                for (var i = 0, j = as.length; i < j; i++) as[i].className = '';
                    this.className = 'bb';
                }
        }
    </script>
      

  3.   

    没有aa样式啊,只有a的样式,说清楚 !!
      

  4.   

    <style>
    body{font-size:12px;}
    *{margin:0; padding:0;}
    ul li{list-style:none;}
    .hd{width:200px; height:300px;}
    .hd ul li{wdith:200px; height:30px; line-height:30px; text-align:center; cursor:pointer; border-bottom:1px #ccc solid;}
    .hd ul li.rr{background:#ccc; font-weight:bold;}
    .rsr{background:#999; font-weight:bold;}
    .newClass{ background: #06F;}
    </style>
    <script src="http://w3school.com.cn/jquery/jquery.js" ></script>
    <script>
    $(document).ready(function(){                                    
    $(".hd ul li").click(function()
    {
    $(this).addClass("rr");  //$("#target").addClass("newClass");
    //#target 指的是需要添加样式的元素的ID
       //newClass 指的是CSS类的名称
    $(this).siblings().removeClass("rr");//$("#target").removeClass("oldClass");
    //#target 指的是需要移除CSS类的元素的ID
       //oldClass 指的是CSS类的名称
    });
    });
    </script>
    <body>
    <div class="hd">
       <ul>
         <li>123</li>
         <li>123</li>
         <li>123</li>
         <li>123</li>
         <li class="newClass">123</li>
      </ul>
    </div>
      

  5.   

    鼠标移上的时候,添加一个样式.cc给当前a
      

  6.   

    鼠标移上去给,当前a附加.bb样式,
      

  7.   

    <style>
    <style>
    a{ width:100px; height:100px; background:#CCC;}
    .bb{ width:100px; height:100px; background:#666}
    </style>
    <div id="dv"><a href="#">2</a><a href="#">3</a><a href="#">5</a></div>
    <script type="text/javascript">
        window.onload = function () {
            var as = document.getElementById('dv').getElementsByTagName('a');
            for (var i = 0, j = as.length; i < j; i++)
                //as[i].onclick = function () {//修改事件就好了
                as[i].onmouseover = function () {
                    for (var i = 0, j = as.length; i < j; i++) as[i].className = '';
                    this.className = 'bb';
                }
        }
    </script>