HTML js 求代码

我想要的就是像新浪的首页的效果。鼠标放在各个标签上，下边出现对应的div。求html代码js代码。月简洁越好。... 我想要的就是像新浪的首页的效果。鼠标放在各个标签上，下边出现对应的div。
求html代码 js代码。月简洁越好。展开





 我来答

4个回答

#热议# 为什么说不要把裤子提到肚脐眼？

梦很甜0505
推荐于2016-07-19 · TA获得超过371个赞

知道小有建树答主

回答量：213

采纳率：100%

帮助的人：146万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>    
<head>    
<meta charset="utf-8" />    
<title>可重复使用的TAB选项卡</title>    
<script type="text/javascript">    
function nTabs(thisObj,Num){    
if(thisObj.className == "active")return;    
var tabObj = thisObj.parentNode.id;    
var tabList = document.getElementById(tabObj).getElementsByTagName("li");    
for(i=0; i <tabList.length; i++)    
{    
 if (i == Num)    
 {    
  thisObj.className = "active";    
     document.getElementById(tabObj+"_Content"+i).style.display = "block";    
 }else{    
  tabList[i].className = "normal";    
  document.getElementById(tabObj+"_Content"+i).style.display = "none";    
 }    
}    
}    
</script>    
<style type="text/css">    
<!--    
*{margin:0;padding:0;list-style:none;font-size:14px}    
.nTab{width:360px;margin:20px auto;background:#fff;border:1px solid #333;overflow:hidden}    
.none {display:none;}    
.nTab .TabTitle li{float:left;cursor:pointer;height:30px;line-height:30px;text-align:center;width:120px}    
.nTab .TabTitle li a{text-decoration:none;}    
.nTab .TabTitle .active{background:#ccc;color:#336699}    
.nTab .TabTitle .normal{background:#666;color:#fff}    
.nTab .TabContent{clear:both;overflow:hidden; background:#FFF}    
-->    
</style>    
</head>    
<body>    
<div class="nTab">    
		<div class="TabTitle">    
		<ul id="myTab">    
		<li class="active" onMouseOver="nTabs(this,0);">ASP</li>    
		<li class="normal" onMouseOver="nTabs(this,1);">PHP</li>    
       <li class="normal" onMouseOver="nTabs(this,2);">JHP</li> 			          
		</ul>    
		</div>    
   <div class="TabContent">    
	<div id="myTab_Content0">同一页面，滑动门，选项卡同在</div>    
	<div id="myTab_Content1" class="none">兼容性好</div>    
   <div id="myTab_Content2" class="none">兼容性好啊</div>    
	</div>	    
</div>    
<div class="nTab">    
		<div class="TabTitle">    
		<ul id="myTab1">    
		<li class="active" onMouseOver="nTabs(this,0);">ASP</li>    
		<li class="normal" onMouseOver="nTabs(this,1);">PHP</li>    
       <li class="normal" onMouseOver="nTabs(this,2);">JHP</li>  			          
		</ul>    
		</div>    
	<div class="TabContent">    
	<div id="myTab1_Content0">简洁TAB，滑动门，选项卡</div>    
	<div id="myTab1_Content1" class="none">兼容性好</div>    
   <div id="myTab1_Content2" class="none">兼容性好啊</div>		    
	</div>	    
</div>    
</body>    
</html>

已赞过 已踩过<

评论收起

jghdream
2013-08-29 · TA获得超过374个赞

知道小有建树答主

回答量：321

采纳率：91%

帮助的人：287万

我也去答题访问个人页

关注

展开全部

Javascript（jQuery）代码如下：
<script language="javascript" type="text/javascript">

$(document).ready(function(){

$("ul.menu li:first-child").addClass("current");

$("div.content").find("div.layout:not(:first-child)").hide();

$("div.content div.layout").attr("id", function(){return idNumber("No")+ $("div.content div.layout").index(this)});

$("ul.menu li").click(function(){

var c = $("ul.menu li");

var index = c.index(this);

var p = idNumber("No");

show(c,index,p);

});

function show(controlMenu,num,prefix){

var content= prefix + num;

$('#'+content).siblings().hide();

$('#'+content).show();

controlMenu.eq(num).addClass("current").siblings().removeClass("current");

};

function idNumber(prefix){

var idNum = prefix;

return idNum;

};

});

</script>

CSS样式代码如下：
<style type="text/css">

* {margin:0; padding:0}

ul,li { list-style:none}

.box {width:450px; height:150px; border:1px solid #ccc;
margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica,
sans-serif}

.tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999}

.tagMenu h2 {font-size:12px; padding-left:10px;}

.tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;}

ul.menu li {float:left; margin-bottom:1px; line-height:16px;
height:14px; margin:5px 0 0 -1px; border-left:1px solid #999;
text-align:center; padding:0 12px; cursor:pointer}

ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0}

.content { padding:10px}

</style>

复制代码
HTML结构代码如下：
<body>

<div class="box">

<div class="tagMenu">

<h2>No.1 Menu</h2>

<ul class="menu">

<li>Label 1.1</li>

<li>Label 1.2</li>

<li>Label 1.3</li>

<li>Label 1.4</li>

</ul>

</div>

<div class="content">

<div class="layout">infomation 1.1</div>

<div class="layout">infomation 1.2</div>

<div class="layout">infomation 1.3</div>

<div class="layout">infomation 1.4</div>

</div>

</div>

<div class="box">

<div class="tagMenu">

<h2>No.2 Menu</h2>

<ul class="menu">

<li>Label 2.1</li>

<li>Label 2.2</li>

<li>Label 2.3</li>

<li>Label 2.4</li>

</ul>

</div>

<div class="content">

<div class="layout">infomation 2.1</div>

<div class="layout">infomation 2.2</div>

<div class="layout">infomation 2.3</div>

<div class="layout">infomation 2.4</div>

</div>

</div>

</body>

文章出处：http://www.pin5i.com/showtopic-27274.html

已赞过 已踩过<

评论收起

邢台限号
2013-08-29

知道答主

回答量：39

采纳率：0%

帮助的人：23.2万

我也去答题访问个人页

关注

展开全部

这是选项卡功能10行js搞定问题…………
稍等代码马上出来
<html>
<head>
<style>
div{ width:200px; height:200px; border:1px #A0A0A4 solid; display:none; }
.active{ background:#FFFFAA;}
</style>
<script>
window.onload=function()
{
var aDiv=document.getElementsByTagName('div');
var aBtn=document.getElementsByTagName('input');
for(var i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;

aBtn[i].onclick=function()

for(var j=0;j<aBtn.length;j++)
{
aBtn[j].className='none';
aDiv[j].style.display='none';
}
aBtn[this.index].className='active';
aDiv[this.index].style.display='block';
};

}

};
</script>
</head>

<body>
<input type="button" id="btn1" value="教育" />
<input type="button" id="btn2" value="培训" />
<input type="button" id="btn3" value="招生" />
<input type="button" id="btn4" value="出国" />
<div id="div1" style="display:block;" >
11111
</div>
<div id="div2">
22222
</div>
<div id="div3">
3333
</div>
<div id="div4">
444
</div>

</body>
</html>

已赞过 已踩过<

评论收起

kevintop3
2013-08-29 · TA获得超过1.5万个赞

知道小有建树答主

回答量：890

采纳率：100%

帮助的人：536万

我也去答题访问个人页

关注

展开全部

这两个都实现了你想要的效果，并且里面都有演示地址！供参考。

http : / / www.divcss5.com/css-texiao/texiao456.shtml

http : / / www.wufangbo.com/js-package-tab/

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

HTML js 求代码

其他类似问题

为你推荐：