如何使用jquery或者js把第一张图实现第二张图的效果
1个回答
展开全部
<!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>左侧竖向选项卡TAB</title>
</head>
<style type="text/css">
<!--
* {font-size:13px;font-family:Arial;}
#nav li {list-style:none; width:120px; margin-top:0;padding:4px 6px;}
#nav li a {text-decoration:none; color:#666;}
#nav li a:hover {color:#333;}
.aa {border-right:1px solid #AAC7E9; background:#E8F5FE;cursor:hand;border-top:3px solid #AAC7E9}
.bb {border:1px solid #AAC7E9;background:#FFFFDD;cursor:hand;border-top:3px solid #ff9900;}
.cc {border-top:4px solid #ff66ff; background:#fcf;cursor:hand;}
.list2 { font-size:13px; line-height:20px; padding:3px;text-align:left;background:#FFFFFF;}
.list2 li{ color:#555;font-size:13px; line-height:24px; padding:0 0 0 10px;}
.list2 a{ text-decoration: underline;}
.lfloat {float:left;}
.rfloat {float:right;}
.ctt{padding:0;clear:both;border-top:1px solid #AAC7E9;border-right:1px solid #AAC7E9;border-bottom:1px solid #AAC7E9;text-align:left;height:307px;}
.dis{display:block;}
.undis{display:none;}
li{list-style: none;}
form, ul { padding:0; margin:0;}
-->
</style>
<div style="width:600px">
<div class="lfloat" style="width:126px">
<ul id="nav">
<li class="aa" id="tb_1" onClick="x:hoverli(1);">ASP版</li>
<li class="bb" id="tb_2" onClick="i:hoverli(2);">PHP版</li>
<li class="aa" id="tb_3" onClick="x:hoverli(3);">CGI版</li>
<li class="aa" id="tb_4" onClick="x:hoverli(4);">JSP版</li>
<li class="aa" id="tb_5" onClick="x:hoverli(5);">VBASIC版</li>
<li class="aa" id="tb_6" onClick="x:hoverli(6);">VC++版</li>
<li class="aa" id="tb_7" onClick="x:hoverli(7);">C#.NET版</li>
<li class="aa" id="tb_8" onClick="x:hoverli(8);">ASP.NET版</li>
<li class="aa" id="tb_9" onClick="x:hoverli(9);">AJAX版</li>
<li class="aa" id="tb_10" onClick="x:hoverli(10);">EXTJS版</li>
<li class="aa" id="tb_11" onClick="x:hoverli(11);">JQUERY版</li>
</ul>
</div>
<div class="lfloat" style="width:450px;">
<div id="newinfo">
<div class="ctt list2">
<div class="dis" id="tbc_01">
ASP版
</div>
<div class="undis" id="tbc_02">
PHP版
</div>
<div class="undis" id="tbc_03">
CGI版
</div>
<div class="undis" id="tbc_04">
JSP版
</div>
<div class="undis" id="tbc_05">
VBASIC版
</div>
<div class="undis" id="tbc_06">
VC++版
</div>
<div class="undis" id="tbc_07">
C#.NET版
</div>
<div class="undis" id="tbc_08">
ASP.NET版
</div>
<div class="undis" id="tbc_09">
AJAX版
</div>
<div class="undis" id="tbc_010">
EXTJS版
</div>
<div class="undis" id="tbc_011">
JQUERY版
</div>
</div>
</div>
</div>
</div>
</div>
<!--div no.1-->
<!--快速导航栏-->
<script type="text/javascript" language="javascript">
//<!cdata[
function g(o){return document.getElementById(o);}
function hoverli(n){
for(var i=1;i<=11;i++){g('tb_'+i).className='aa';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='list2';g('tb_'+n).className='bb';
}
function fun(){
hoverli(3);
}
function hoverli2(n){
for(var i=1;i<=11;i++){g('js_'+i).className='aa';g('jsc_0'+i).className='undis';}g('jsc_0'+n).className='list2';g('js_'+n).className='bb';
}
function fun2(){
hoverli2(3);
}
function hoverli3(n){
for(var i=1;i<=11;i++){g('be_'+i).className='aa';g('bec_0'+i).className='undis';}g('bec_0'+n).className='list2';g('be_'+n).className='bb';
}
function fun3(){
hoverli2(3);
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
</script>
<body>
</body>
</html>
你应该是要这种效果把，调整一下样式应该可以满足你的需求
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
