鼠标点击改变内容

本帖最后由 u013231756 于 2014-06-19 08:38:58 编辑

解决方案 »

  1.   

    http://www.codefans.net/jscss/code/111.shtml
      

  2.   

    我知道你的意思你去google或者baidu搜索关键字  js  tab 选项卡  绝对是你想要的
      

  3.   

    <div class="list" id="dv">   
    <table class="table">
    <tbody>
    <tr><td>11</td></tr>
    </tbody>
    </table>
    <table class="table1">
    <tbody>
    <tr><td>22</td></tr>
    </tbody>
    </table>
    <table class="table2">
    <tbody>
    <tr><td>33</td></tr>
    </tbody>
    </table>
    <table class="table3">
    <tbody>
    <tr><td>44</td></tr>
    </tbody>
    </table>
    </div>
    <script>
        window.onload = function () {
            var current = 0, dv = document.getElementById('dv'), tbs = document.getElementsByTagName('table'), l = tbs.length;
            for (var i = 1; i < l; i++) tbs[i].style.display = 'none'; //隐藏其他table
            dv.onclick = function () {
                tbs[current].style.display = 'none';
                current++;
                if (current >= l) current = 0;
                tbs[current].style.display = '';
            }
        }
    </script>
      

  4.   

    在div上添加点击事件，然后通过样式来显示或者隐藏对应的table
      

  5.   


    <html>
    <head>
    <script src="js/jquery-2.1.1.js"></script>
    <style>
    *{margin:0px;padding:0px;list-style: none;}
    #container{border:#E8E8E8 1px solid;width:495px;margin:50px auto 0 auto;height:400px;}
    #header{height:28px;}

    #header ul li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;}
    #header ul .liShow{background:#AFAFAF;color:#E6E6E6;}
    .add{background:#FFFFFF;color:#1C94C4;}


    </style>
    <script>
    function setTab(t){
    var length=$(".body").length;

    for(i=1;i<=length;i++)
    {
    var li=document.getElementById("header"+i);
    var div=document.getElementById("body_header"+i);
    if(i==t)
    {
    li.className="add";
    div.style.display="block";
    }else
    {
    li.className="liShow";
    div.style.display="none";
    };
    };

    };


    if(window.XMLHttpRequest)
    {
    xmlhttp=new XMLHttpRequest();
    }else
    {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","book.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.reponseXML;


    </script>
    </head>
    <body>
    <div id="container">
    <div id="header">
    <ul>
    <li id="header1" onclick="setTab(1)" class="add">今日热点</li>
    <li id="header2" onclick="setTab(2)" class="liShow">国际新闻</li>
    <li id="header3" onclick="setTab(3)" class="liShow">城市论坛</li>
    <li id="header4" onclick="setTab(4)"  class="liShow">科技专区</li>
    <li id="header5" onclick="setTab(5)"  class="liShow">灌水专区</li>
    </ul>
    </div>
    <div id="body">
    <div id="body_header1" class="body" style="display: block;">阿根廷2-1胜波黑!梅西终进球!</div>
    <div id="body_header2" class="body" style="display: none;">迪拜拟造全球最高大厦</div>
    <div id="body_header3" class="body" style="display: none;">工人难挡酷暑街头昏迷</div>
    <div id="body_header4" class="body" style="display: none;">苹果全球开发者大会发布swift语言</div>
    <div id="body_header5" class="body" style="display: none;">水水水</div>
    </div>
    </div>

    </body>
    </html>
      

  6.   

    需要引入jQuery$(function () {
        $("#dv table:not(.table)").hide();
        $("table").each(function (i) {
            var $this = $(this);
            $this.click(function(){
                if(i == $("table").length-1){
                    $this.hide();
                    $("table:first").show();
                }else{
                    $this.hide().next().show();
                }
            });
        });
    });