html如何做成如下效果!求教

qq110769392 2013-03-10 05:44:19



打开一个网页像上面这两张图片点击菜单的时候页面地址不变下面的内容随菜单点击改变!html+CSS能做到吗?怎么做?
...全文
167 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
huan0911612504 2013-03-11
  • 打赏
  • 举报
回复
http://jqueryui.com/tabs/#ajax可以参照这个的,jqueryui实现的一个插件
水军总督 2013-03-11
  • 打赏
  • 举报
回复
<div class="float2" align="left" style="position:relative;"> <img class="a" src="bj2.jpg"> <div class="4" style="position:absolute;left:52px;top:70px;" z-index=5> <img src="cg4.jpg"> </div> <div class="3" style="position:absolute;left:52px;top:70px;" z-index=5> <img src="cg3.jpg"> </div> <div class="2" style="position:absolute;left:52px;top:70px;" z-index=5> <img src="cg2.jpg"> </div> <div class="1" style="position:absolute;left:52px;top:70px;" z-index=5> <img src="cg1.jpg"> </div> <div id="div4" style="position:absolute;left:52px;top:70px; display:none;" z-index=6> <img src="cg4.jpg"> </div> <div id="div3" style="position:absolute;left:52px;top:70px; display:none;" z-index=6> <img src="cg3.jpg"> </div> <div id="div2" style="position:absolute;left:52px;top:70px; display:none;" z-index=6> <img src="cg2.jpg"> </div> <div id="div1" style="position:absolute;left:52px;top:70px; display:none;" z-index=6> <img src="cg1.jpg"> </div> <div> <p style="font-size:25px;margin-top:10px;margin-left:60px;"><img src="jiantou2.jpg"> <b>实践教学成果</b><hr></p> <div style="position:absolute;left:224px;top:209px;" align="center" z-index=7> <table width="80"> <tr height="20px"> <a href="#" onmouseover="javascript:shows(1);" ><td height="20px" width="20px" background="j1.jpg" onmouseout="javascript:change();" z-index=7></td></a> <a href="#" onmouseover="javascript:shows(2);" ><td height="20px" width="20px" background="j2.jpg" onmouseout="javascript:change();" z-index=7></td></a> <a href="#" onmouseover="javascript:shows(3);" ><td height="20px" width="20px" background="j3.jpg" onmouseout="javascript:change();" z-index=7></td></a> <a href="#" onmouseover="javascript:shows(4);" ><td height="20px" width="20px" background="j4.jpg" onmouseout="javascript:change();" z-index=7></td></a> </tr> </table> </div> </div>
lyyzms 2013-03-11
  • 打赏
  • 举报
回复
<script type="text/javascript"> $(function () { $("#tabs").tabs(); }); </script> <div id="tabs"> <ul> <li><a href="#a">a</a></li> <li><a href="#b">b</a></li> </ul> </div>
coke0 2013-03-11
  • 打赏
  • 举报
回复
<!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=utf-8" />
<title>Untitled Document</title>
<style>
#tab{
	border:1px solid #003500;
	width:200px;
	height:25px;
	text-align:left;}
#tab ul{
	padding:0px;
	margin:0px;
	width:200px;
	height:25px;
}
#tab ul li{
	float:left;
	list-style:none;
	text-align: center;
	width:50px;
	height:25px;
	line-height:25px;
	font-size:12px;}
#tab ul li a{
	font-size:12px;
	color:#000;
	text-decoration:none;
        outline:none;}
#tab ul li a:hover{
	font-size:12px;
	text-decoration:none;}
#tab ul li.one{
	background:#fff;
	color: #000;}
#tab ul li.two{
	background:#003500;
	color: #FFF;
	}
#tablist{
	border:1px solid #003500;
	border-top:none;
	width:200px;
	height:200px;
	text-align:left;
	}
#tablist .one{
	display:block;}
#tablist .two{
	display:none;}
</style>
<script>
window.onload = function()
{
	var oTabLi= document.getElementById('tab').getElementsByTagName('li');//获取id为tab下的li
	var oTabList= document.getElementById('tablist').getElementsByTagName('div');//获取id为tablist下的div
	var i=0;
	for(i=0;i<oTabLi.length;i++)
	{
		oTabLi[i].index = i;
		oTabLi[i].onmouseover = (function(){		//(function(){})闭包
			for(var j=0;j<oTabList.length;j++)		//清除
			{
				oTabList[j].className='two';
				oTabLi[j].className='two';
			}
			oTabList[this.index].className='one';
			oTabLi[this.index].className='one';
			});	
	};
};
</script>
</head>
<body>
<div id="tab">
<ul>
<li class="one"><a href="javascript:void(0);">网易</a></li>
<li class="two"><a href="javascript:void(0);">搜狐</a></li>
<li class="two"><a href="javascript:void(0);">百度</a></li>
<li class="two"><a href="javascript:void(0);">谷歌</a></li>
</ul>
</div>
<div id="tablist">
<div class="one">001</div>
<div class="two">002</div>
<div class="two">003</div>
<div class="two">004</div>
</div>
</body>
</html>
coke0 2013-03-11
  • 打赏
  • 举报
回复
这是我以前写的一个代码。
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
02.<html xmlns="http://www.w3.org/1999/xhtml">  
03.<head>  
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
05.<title>Untitled Document</title>  
06.<style>  
07.#tab{  
08.    border:1px solid #003500;  
09.    width:200px;  
10.    height:25px;  
11.    text-align:left;}  
12.#tab ul{  
13.    padding:0px;  
14.    margin:0px;  
15.    width:200px;  
16.    height:25px;  
17.}  
18.#tab ul li{  
19.    float:left;  
20.    list-style:none;  
21.    text-align: center;  
22.    width:50px;  
23.    height:25px;  
24.    line-height:25px;  
25.    font-size:12px;}  
26.#tab ul li a{  
27.    font-size:12px;  
28.    color:#000;  
29.    text-decoration:none;  
30.        outline:none;}  
31.#tab ul li a:hover{  
32.    font-size:12px;  
33.    text-decoration:none;}  
34.#tab ul li.one{  
35.    background:#fff;  
36.    color: #000;}  
37.#tab ul li.two{  
38.    background:#003500;  
39.    color: #FFF;  
40.    }  
41.#tablist{  
42.    border:1px solid #003500;  
43.    border-top:none;  
44.    width:200px;  
45.    height:200px;  
46.    text-align:left;  
47.    }  
48.#tablist .one{  
49.    display:block;}  
50.#tablist .two{  
51.    display:none;}  
52.</style>  
53.<script>  
54.window.onload = function()  
55.{  
56.    var oTabLi= document.getElementById('tab').getElementsByTagName('li');//获取id为tab下的li  
57.    var oTabList= document.getElementById('tablist').getElementsByTagName('div');//获取id为tablist下的div  
58.    var i=0;  
59.    for(i=0;i<oTabLi.length;i++)  
60.    {  
61.        oTabLi[i].index = i;  
62.        oTabLi[i].onmouseover = (function(){        //(function(){})闭包  
63.            for(var j=0;j<oTabList.length;j++)       //清除  
64.            {  
65.                oTabList[j].className='two';  
66.                oTabLi[j].className='two';  
67.            }  
68.            oTabList[this.index].className='one';  
69.            oTabLi[this.index].className='one';  
70.            });   
71.    };  
72.};  
73.</script>  
74.</head>  
75.<body>  
76.<div id="tab">  
77.<ul>  
78.<li class="one"><a href="javascript:void(0);">网易</a></li>  
79.<li class="two"><a href="javascript:void(0);">搜狐</a></li>  
80.<li class="two"><a href="javascript:void(0);">百度</a></li>  
81.<li class="two"><a href="javascript:void(0);">谷歌</a></li>  
82.</ul>  
83.</div>  
84.<div id="tablist">  
85.<div class="one">001</div>  
86.<div class="two">002</div>  
87.<div class="two">003</div>  
88.<div class="two">004</div>  
89.</div>  
90.</body>  
91.</html> 
痞子wu情 2013-03-11
  • 打赏
  • 举报
回复
这个应该是选项卡 也叫tab页 光靠div和css是实现不了的 需要js来辅助 网上会有很多的示例 同时Dreamweaver也自带这种效果 可以直接套用 插入记录>spry>选项卡
夙女 2013-03-11
  • 打赏
  • 举报
回复
选项卡特效 百度一搜很多的
云水千寻 2013-03-10
  • 打赏
  • 举报
回复
只用HTML+CSS能不能做到这个效果我不太清楚, 但是HTML+CSS+JavaScript肯定能做到
mycoolaccount 2013-03-10
  • 打赏
  • 举报
回复
就是CSS3可以做到的,ul +li就可以了
ftiger 2013-03-10
  • 打赏
  • 举报
回复
百度 选项卡效果
qq110769392 2013-03-10
  • 打赏
  • 举报
回复
html+css能实现?有具体实例么?
huan0911612504 2013-03-10
  • 打赏
  • 举报
回复
可以啊,一开始就把所有内容放在一个网页中,然后将不同tab的内容设为隐藏,相应每一个tab的标题点击事件,显示不同的tab内容 或者,可以直接使用jquery-ui的东西

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧