<script src="../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />.imgmenu{list-style-type:none;}
.imgmenu li{width:59px;text-align:center;color:#fff;cursor:pointer;float:left;font-weight:bold;}
.imgmenu li a{display:block;width:59px;font-size:14px;text-decoration:none;}
.imgmenu li a:link,a:visited{color:#000;background:url(../images/z_04.gif) no-repeat;line-height:26px;height:26px;} 
.imgmenu li a:hover,a:active{color:#fff;background:url(../images/z_03.gif) no-repeat;line-height:26px;height:26px;} 
.TabbedPanelsContent{clear: both;height:25px;}
.TabbedPanelsContent ul{}
.TabbedPanelsContent li{display:block;float:left;padding:0 8px;font-size:12px;list-style-type:none;}
.TabbedPanelsContent a:link,a:visited{color:#000;line-height:23px;text-decoration:none;}
.TabbedPanelsContent a:hover{color:#F60;line-height:23px;text-decoration:underline;
}
.TabbedPanels{width:950px;height:51px;padding-left:8px;background:url(../images/z_01.gif) no-repeat;}<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="imgmenu">
   <li onMouseOver="TabbedPanels1.showPanel(0)" ><a href="../news/">新闻</a></li> 这里实现图片翻转
   <li onMouseOver="TabbedPanels1.showPanel(1)" ><a href="../photo/">图片</a></li>
   <li onMouseOver="TabbedPanels1.showPanel(2)" ><a href="../soft/">软件</a></li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">{LB_新闻栏目导航}</div>
    <div class="TabbedPanelsContent">{LB_图片栏目导航}</div>
    <div class="TabbedPanelsContent">{LB_软件栏目导航}</div>
  </div>
</div><script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>现在问题是三个li的链接点击没反应,不能转向新页面
改成<li onMouseOver="TabbedPanels1.showPanel(2)" onclick="window.location.href='../soft/'"><a href="../soft/">软件</a></li>
虽然能实现,但我感觉不是很恰当,有没有更好的办法呢?

解决方案 »

  1.   

    没道理不能点击,是不是TabbedPanels1遮挡住了
      

  2.   

    不仅不能点击,二级菜单还出现红色背景块,如同牛皮藓
    到我的空间看看啊http://www.xccrugs.com/test.html源代码如下,js框架可以下,帮我测试一下,尤其是红色块非常讨厌
    <!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>test</title>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    </head>
    <body>
    <style type="text/css">
    .imgmenu{list-style-type:none;}
    .imgmenu li{width:59px;text-align:center;color:#fff;cursor:pointer;float:left;font-weight:bold;}
    .imgmenu li a{display:block;width:59px;font-size:14px;text-decoration:none;}
    .imgmenu li a:link,a:visited{color:#000;background:url(../images/z_04.gif) no-repeat;line-height:26px;height:26px;} 
    .imgmenu li a:hover,a:active{color:#fff;background:url(../images/z_03.gif) no-repeat;line-height:26px;height:26px;} 
    .TabbedPanelsContent{clear: both;height:25px;}
    .TabbedPanelsContent ul{}
    .TabbedPanelsContent li{display:block;float:left;padding:0 8px;font-size:12px;list-style-type:none;}
    .TabbedPanelsContent a:link,a:visited{color:#000;line-height:23px;text-decoration:none;}
    .TabbedPanelsContent a:hover{color:#F60;line-height:23px;text-decoration:underline;
    }
    .TabbedPanels{width:950px;height:51px;padding-left:8px;background:url(../images/z_01.gif) no-repeat;}
    </style><div id="TabbedPanels1" class="TabbedPanels">
      <ul class="imgmenu">
       <li onMouseOver="TabbedPanels1.showPanel(0)"><a href="news/list_546.html">新闻</a></li>
       <li onMouseOver="TabbedPanels1.showPanel(1)"><a href="photo/list_528.html">图片</a></li>
       <li onMouseOver="TabbedPanels1.showPanel(2)"><a href="download/list_527.html">软件</a></li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
        <ul>    
        <li><a href="#" target="_blank">国内新闻</a></li>
        <li><a href="#" target="_blank">国际新闻</a></li>
        <li><a href="#"  target="_blank">社会新闻</a></li>
        <li><a href="#" target="_blank">财经新闻</a></li>
        <li><a href="#"  target="_blank">社会新闻</a></li>
        <li><a href="#" target="_blank">财经新闻</a></li>
    </ul> </div>
        <div class="TabbedPanelsContent">
        <ul>
        <li><a href="#" target="_blank">IT图片</a></li>
        <li><a href="#" target="_blank">通信图片</a></li>
        <li><a href="#" target="_blank">3G图片</a></li>
        <li><a href="#"  target="_blank">社会图片</a></li>
        <li><a href="#" target="_blank">财经图片</a></li>
    </ul> </div>
        <div class="TabbedPanelsContent">   
        <ul>
        <li><a href="#" target="_blank">互联软件</a></li>
        <li><a href="#" target="_blank">通信软件</a></li>
        <li><a href="#"  target="_blank">社会软件</a></li>
        <li><a href="#"  target="_blank">社会软件</a></li>
        <li><a href="#" target="_blank">财经软件</a></li>
    </ul>  </div>
      </div>
    </div><script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
    </script>
    </body>
    </html>