<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>
虽然能实现,但我感觉不是很恰当,有没有更好的办法呢?
<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>
虽然能实现,但我感觉不是很恰当,有没有更好的办法呢?
到我的空间看看啊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>