我要点击换效果 可是做不出来 帮看看吧 谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单击改变div样式</title>
<style>
#div1{
background-color:#0099FF;
font-size:16px;
margin-bottom:10px;
margin-left:50px;
}
#div2{
background-color:#FF99FF;
font-size:36px;
margin-top:20px;
margin-left:50px;
}
</style>
<script language="javascript">
function change(){
var div1=document.getElementsByTagName('div')[0];
div1.className='div1';
}
function change1(){
var div=document.getElementById('div2');
div.id='div2';
}
</script>
</head>
<body>
<div  onclick= 'change()' id="div1">
just do is
</div>
<div onclick="change1()" id="div2">
nothing is impossible
</div>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>单击改变div样式</title>
    <style>
    .div1{
    background-color:#0099FF;
    font-size:16px;
    margin-bottom:10px;
    margin-left:50px;
    }
    .div2{
    background-color:#FF99FF;
    font-size:36px;
    margin-top:20px;
    margin-left:50px;
    }
    </style>
    <script language="javascript">
    function change(){
    var div1=document.getElementById('div1');
    div1.className='div1';
    }
    function change1(){
    var div=document.getElementById('div2');
    div.className='div2';
    }
    </script>
    </head>
    <body>
    <div onclick='change()' id="div1">
    just do is
    </div>
    <div onclick="change1()" id="div2">
    nothing is impossible
    </div>
    </body>
    </html>className是设置对象的CSS类名
    #div1 这是CSS中的ID选择器，不是类。
      

  2.   

    这里不对吧：
    function change1(){
    var div=document.getElementById('div2');
    div.id='div2';应该是：
    function change1(){
    var div=document.getElementById('div2');
    div.className='div2';
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>单击改变div样式</title>
    <style>
    #div1{
    background-color:#0099FF;
    font-size:16px;
    margin-bottom:10px;
    margin-left:50px;
    }
    #div2{
    background-color:#FF99FF;
    font-size:36px;
    margin-top:20px;
    margin-left:50px;
    }
    </style>
    <script language="javascript">
    function change(){
    var div1=document.body.getElementsByTagName('div')[0];
    div1.className='div1';
    }
    function change1(){
    var div=document.getElementById('div2');
    div.id='div2';
    }
    </script>
    </head>
    <body>
    <div class="" onclick= 'change()' id="div1">
    just do is
    </div>
    <div onclick="change1()" id="div2">
    nothing is impossible
    </div>
    </body>
    </html>
      

  4.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <title>Untitled Document</title>
            <script type="text/javascript" language="JavaScript" src="http://code.jquery.com/jquery-1.6.2.min.js">
            </script>
            <script type="text/javascript">
                $(function(){
                    $('#div1,#div2').click(function(){
                        $(this).toggleClass($(this).attr('id'));
                    });
                });
            </script>
            <style>
                .div1 {
                    background-color: #0099FF;
                    font-size: 16px;
                    margin-bottom: 10px;
                    margin-left: 50px;
                }
                
                .div2 {
                    background-color: #FF99FF;
                    font-size: 36px;
                    margin-top: 20px;
                    margin-left: 50px;
                }
            </style>
        </head>
        <body>
            <div id="div1" class='div1'>
                just do is
            </div>
             <div id="div2" class='div2'>
               nothing is impossible
            </div>
        </body>
    </html>