初来这里，请多多帮助我一下，如何实现以下菜单效果（最好是ＣＳＳ的），小妹感谢了。［100分］

我是初网页设计的，老板要实现以下效果，请大家帮助我一下。 
这是默认状态 
 
当点击Ｍｕｓｉｃ后 
 由于我刚学完的，自己实现不了这个效果，问同事吧，刚来上班……，希望会的朋友帮助我一下。如果实现了，我马上给您分。我只会一点ＣＳＳ，不知道此效果用ＣＳＳ能实现不，jvascript一点也不会。希望哪帮助我实现这个效果。

解决方案 »

  1.   


    <head> 
    <title> New Document </title> 
    <style> 
    td        { font-family: 宋体; font-size: 9pt;} .ooib { border-width: 1px; border-style: none solid solid; border-color: #CC3333; background-color: #E4E5EE;align:center;} 
    .ooih td { border-width: 1px; padding: 0 5; } 
    .ooihj { color: #CC3333; background-color: #E4E5EE; border-style: solid solid none; border-color: #CC3333; cursor: hand} 
    .ooihs { color: #6600CC; background-color: #ccccFF; border-style: solid; border-color: #6600CC #6600CC #CC3333; cursor: hand} 
    .ooihx { border-style: none none solid; border-color: #CC3333; } </style> 
    <script language="JavaScript"> 
    function ghbq(td) 
    { 
        var tr = td.parentElement.cells; 
        var ob = obody.rows; 
        for(var ii=0; ii<tr.length-1; ii++) 
        { 
          tr[ii].className = (td.cellIndex==ii)?"ooihj":"ooihs"; 
          ob[ii].style.display = (td.cellIndex==ii)?"block":"none"; 
        } 
    } 
    </script> 
    </head> <body> <table class="ooih" border="0" cellspacing="0" cellpadding="0" width="400" height="19"> 
        <tr> 
    <td class="ooihj" nowrap onMouseOver="ghbq(this)">标签一</td> 
    <td class="ooihs" nowrap onMouseOver="ghbq(this)">标签二</td> 
    <td class="ooihs" nowrap onMouseOver="ghbq(this)">标签三</td> 
    <td class="ooihs" nowrap onMouseOver="ghbq(this)">标签四</td> 
    <td class="ooihx" width="100%"> </td> 
        </tr> 
    </table> 
    <table class="ooib" id="obody" border="0" cellspacing="0" cellpadding="0" width="237" height="133"> 
    <tr> 
          <td> 
          <li>标签内容一 </li>
           <li>标签内容一 </li>
            <li>标签内容一 </li>
            <li>标签内容一 </li>
             <li>标签内容一 </li>
             <li>标签内容一 </li>
             <li>标签内容一 </li>
        </td> 
        </tr> 
        <tr style="display: none"> 
          <td> 
    标签内容二 
          </td> 
        </tr> 
        <tr style="display: none"> 
          <td> 
    标签内容三 
          </td> 
        </tr> 
        <tr style="display: none"> 
          <td height="12"> 
    标签内容四      </td> 
      </tr> 
    </table> </body> 
    </html>
      

  2.   

    请问，默认状态下的代码你有吗？比较两张图片（当然不是图片，可以视为之）的效果，用CSS可以实现你需要的效果，在<td></td>相应的class中找到在css中定义的类.当点击Ｍｕｓｉｃ后 ,地址栏中的路径是不是改变了？假设地址栏中最后的php文件为a.php 
    if(eregi("a.php",$_SERVER['PHP_SELF']))
    {
    //Media对应的<td></td>中class与Music对应的<td></td>中class交换一下就可以了
    //你再实现看一下，中不？
    }如果不是这样子的，可以把你的代码贴出来看一下或者再等等，看看别人有什么高见哈！
      

  3.   

    其实光依靠ＣＳＳ来实现楼主说的效果，非常不容易（可能因为本人ＣＳＳ水平一般）。但一但用ＪＳ，就比较好解决了。
    我提供一下解决思路：用ＪＳ控制层的zIndex属性来实现。
    简单代码演示［由于，手头没有图片，只是简单用了两个不同颜色的层来代替］
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style type="text/css">
    <!--
    *{font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;color:#FF0000;font-weight:bolder;}
    #div1{position:absolute;left:226px;top:34px;width:120px;height:30px;cursor:pointer;background-color:#CCCCCC;}
    #div2{position:absolute;left:294px;top:34px;width:120px;height:30px;cursor:pointer;background-color:#0000CC;text-align: right;}
    -->
    </style>
    <script language="javascript">
    <!--
    var div
    div.style.zIndex=1;
    function show(o){
    o.style.zIndex+=1;
    }
    -->
    </script>
    </head><body>
    <div id="div1" style=""  onclick="show(this)">左按钮</div>
    <div id="div2" style=""  onclick="show(this)">右按钮</div>
    </body>
    </html>
      

  4.   

    怎么一下出来了好几个回复？？这么快？？ac-47我说的效果就是上边的两个按钮，一个压在另一个上面，点一个时它在最上面，听懂了吗？octveve我先试试，我不会ＪＳ，不知道你给的是不是我要的效果
      

  5.   

    是，octveve，你给的就是我说的那个效果，可是我怎么用图片呢？？如果我改用图片我是不是应该这个改呢？
      

  6.   

    嗨嗨我自己解决了，我把图片放在div里了，好好了,好好了，我先去让经理看看行不行，如果行，我马上结分，谢谢来这里的帮助我的朋友
      

  7.   

    大姐姐今年26了啊
    图片放DIV里用JS来控制DIV
    思路是这样的对吗？
      

  8.   

    经理说可以了，但有时按钮好象不太好使不知道为什么？？
    图片放DIV里用JS来控制DIV 
    思路是这样的对吗？
    ？？？？？
    那你说怎么作？？
      

  9.   

    经理说可以了，但有时按钮好象不太好使不知道为什么？？
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    把原来的替换成下面的，就好了<script language="javascript">
    <!--
    var div=1;
    function show(o){
    o.style.zIndex=div;
    div++;
    }
    -->
    </script>图片放DIV里用JS来控制DIV  
    思路是这样的对吗？
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    可以用ＣＳＳ，让图片在为层的背景（利用ＣＳＳ翻转滤镜可以实现一张图片两个效果）
      

  10.   

    //Htm
    <div class="mainbot"><div class="contT"> 
     <ul id="tabactorTypeUI" >
        <li id="tabActor1" class="active"><a href="Javascript:void(0)" onclick="ShwoActorTabPage(\'tabActor\',\'1\');GetHotActorlist()"> 最热形像</a></li>
         <li id="tabActor2"><a href="Javascript:void(0)" onclick="ShwoActorTabPage(\'tabActor\',\'2\');GetNewActorlist()">最新形像</a></li>
     <li id="tabActor3"><a href="Javascript:void(0)" onclick="ShwoActorTabPage(\'tabActor\',\'3\');GetBestActorlist();">评价最高</a></li> 
        </ul>        
     </div><div class="contC" id="tabActor1Page"></div>                   
    <div class="contC" style="display: none; " id="tabActor2Page"></div>
    <div class="contC" style="display: none;"  id="tabActor3Page"></div>//js
    var ShwoActorTabPage=function(id,index)
    {    var obj=$("tabactorTypeUI");
       var el=obj.getElementsByTagName("li");
       for(var i=1;i<=el.length;i++)
       {        
            if(i==index)
            {  
                $(id+i).className="active";
                $(id+i+"Page").style.display="";
             }
            else
            {
                $(id+i).className="";
                $(id+i+"Page").style.display="none";
            }
       }
    };注$=getElmentByID 样式class="contC"    class="active"你可以 随便定义自己的效果 
    我们都是这样实现的.其实网上这样面成的代码很多,以后要学会自己找资料.这样进步才快