有能力你就来！JS效果高分求方法！

这样的效果应咱写求解
效果地址（http://www.loho88.com

解决方案 »

  1.   

    选项卡效果？控制div display 就可以了
      

  2.   

    是菜单的效果吗？
    jquery　ｍｅｎｕ　插件　很多的
      

  3.   

    这个比选项卡效果难多啦！
    控制div display 是不可以的！那你咱判断！
    他选择城市时右边选项对应出所需的内容呢？ 
      

  4.   


    标激动，哈哈
    我没有看源码，我直接看效果，我想如果是我做，我会这样：<!DOCTYPE html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>ddd</title>
    <script src="../../Js/jquery-1.7.1.min.js"></script>
    <script>
    //初始化的地址和选项卡变量
    var _address="A";
    var _index="X1";$(document).ready(function(){
    //初始化
    showValue();
    changeAddress(_address);
    changeIndex(_index);
    });//控制地址
    function changeAddress(adr){
    $("div").hide();
    $("#"+adr+_index).show();
    _address=adr;
    showValue();
    }
    //控制选项卡
    function changeIndex(index){
    _index=index;
    $("."+_address).hide();
    $("#"+_address+index).show();
    showValue();
    }
    //显示变量便于调试，可以不要
    function showValue(){
    $("#adr").html(_address);
    $("#index").html(_index);
    }
    </script>
    </head><body>
    _address:<span id="adr"></span><br>_index:<span id="index"></span>
    <table width="686" border="0" cellpadding="0">
      <tr>
        <td height="20" colspan="2">
    <span onClick="changeAddress('A')">地址A</span> | 
    <span onClick="changeAddress('B')">地址B</span></td>
      </tr>
      <tr>
        <td width="86" height="20"><span onClick="changeIndex('X1')">选项卡X1</span></td>
        <td height="20" rowspan="3" valign="top">
    <div style="width:600px; height:60px; background:#999999" class="A" id="AX1">AX1</div>
    <div style="width:600px; height:60px; background:#999999" class="A" id="AX2">AX2</div>
    <div style="width:600px; height:60px; background:#999999" class="A" id="AX3">AX3</div>

    <div style="width:600px; height:60px; background:#999999" class="B" id="BX1">BX1</div>
    <div style="width:600px; height:60px; background:#999999" class="B" id="BX2">BX2</div>
    <div style="width:600px; height:60px; background:#999999" class="B" id="BX3">BX3</div>
    </td>
      </tr>
      <tr>
        <td height="20"><span onClick="changeIndex('X2')">选项卡X2</span></td>
      </tr>
      <tr>
        <td height="20"><span onClick="changeIndex('X3')">选项卡X3</span></td>
      </tr>
    </table>
    </body>
    </html>
      

  5.   

    使用了jquery。。
    看不明白，随时提问。
      

  6.   

    封装一个函数，传入(x, y) 然后显示相应的item
      

  7.   

    应该是你想要的。
    原理就是使用：_address和_index 产生不同组合,从而控制显示。
      

  8.   

    会一点，不多，你这个写的是所有的DIV隐藏，有BUG,如我写在页面上全是DIV的都给隐藏啦！onClick="changeIndex('X2')" 为什么是X2呢？
      

  9.   

    给div的外面加一个 id=“main”
        
    <td height="20" rowspan="3" valign="top" id="main">
            <div style="width:600px; height:60px; background:#999999" class="A" id="AX1">AX1</div>
            <div style="width:600px; height:60px; background:#999999" class="A" id="AX2">AX2</div>
            <div style="width:600px; height:60px; background:#999999" class="A" id="AX3">AX3</div>
             
            <div style="width:600px; height:60px; background:#999999" class="B" id="BX1">BX1</div>
            <div style="width:600px; height:60px; background:#999999" class="B" id="BX2">BX2</div>
            <div style="width:600px; height:60px; background:#999999" class="B" id="BX3">BX3</div> 
        </td>修改$("div").hide();为
    $("#main div").hide();
      

  10.   

    onClick="changeIndex('X2')" 
    表示切换到第二个选项卡，如果当前_address是A那么就切换到id="AX2"的选项卡。