纯CSS+Div 的标签【原创】
2011-01-11 20:32
134 查看
CSS内容:
Html 代码<!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">
<link rel="stylesheet" type="text/css" href="tongue.css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS+Div 的标签</title>
<script type="text/javascript" language="javascript">
{
function change(id_M,id_O){
document.getElementById('tongue_'+id_M).className ="tongue_M_title";
document.getElementById('tongue_content_'+id_M).style.display="block";
var id_o_List =String(id_O).split(',');
for (x in id_o_List){
document.getElementById('tongue_content_'+id_o_List[x]).style.display="none";
document.getElementById('tongue_'+id_o_List[x]).className ="tongue_title";
}
}
}
</script>
</head>
<body>
<div class="tongue_main">
<div class="tongue">
<a href="#" class="tongue_title" id="tongue_1" onmouseover="javascript:change('1','2,3');">新闻中心</a>
<a href="#" class="tongue_M_title" id="tongue_2" onmouseover="javascript:change('2','1,3');">广东新闻</a>
<a href="#" class="tongue_M_title" id="tongue_3" onmouseover="javascript:change('3','1,2');">深圳新闻</a>
<div class="tongue_clear"></div>
<div class="tongue_content" id="tongue_content_1"> 新闻中心</div>
<div class="tongue_content" id="tongue_content_2" style="display:none"> 广东新闻</div>
<div class="tongue_content" id="tongue_content_3" style="display:none"> 深圳新闻</div>
</div>
</div>
</body>
</html>
效果:
Html 代码<!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">
<link rel="stylesheet" type="text/css" href="tongue.css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS+Div 的标签</title>
<script type="text/javascript" language="javascript">
{
function change(id_M,id_O){
document.getElementById('tongue_'+id_M).className ="tongue_M_title";
document.getElementById('tongue_content_'+id_M).style.display="block";
var id_o_List =String(id_O).split(',');
for (x in id_o_List){
document.getElementById('tongue_content_'+id_o_List[x]).style.display="none";
document.getElementById('tongue_'+id_o_List[x]).className ="tongue_title";
}
}
}
</script>
</head>
<body>
<div class="tongue_main">
<div class="tongue">
<a href="#" class="tongue_title" id="tongue_1" onmouseover="javascript:change('1','2,3');">新闻中心</a>
<a href="#" class="tongue_M_title" id="tongue_2" onmouseover="javascript:change('2','1,3');">广东新闻</a>
<a href="#" class="tongue_M_title" id="tongue_3" onmouseover="javascript:change('3','1,2');">深圳新闻</a>
<div class="tongue_clear"></div>
<div class="tongue_content" id="tongue_content_1"> 新闻中心</div>
<div class="tongue_content" id="tongue_content_2" style="display:none"> 广东新闻</div>
<div class="tongue_content" id="tongue_content_3" style="display:none"> 深圳新闻</div>
</div>
</div>
</body>
</html>
效果:
相关文章推荐
- CSS 后代选择器,结合<div><span>标签
- DIV+CSS中标签dl dt dd常用的用法
- <div>标签(css与html写在一起 style type=“text/css”)
- Html-Css-div标签嵌套浮动div标签时无法撑开外部div的解决
- css基础 设置div标签 宽度 边框线颜色样式 div中文本居中 div块在网页中居中 div中内容距边框线的距离
- DIV+CSS中标签dl dt dd常用的用法
- css+div设置标签和按钮
- div+css 误区 html标准标签 css建议 静态页面制作
- 【代码】用div+css实现 在新窗口中打开指定的DIV标签下链接
- DIV+CSS中标签dl dt dd常用的用法
- CSS+DIV标签命名规范
- css基础 设置div标签 宽度 边框线颜色样式 div中文本居中 div块在网页中居中 div中内容距边框线的距离
- HTML&CSS基础学习笔记1.20-DIV标签2
- div标签、html/css基本样式、canvas画布
- 一、CSS与HTML元素整合div标签的使用
- DIV+CSS中标签dl dt dd常用的用法
- div是什么?标签?div+css
- Html-Css-div标签设定-剧中
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
- JSP自定义标签开发(八)—— xx.tag自定义标签开发之分页标签(jquery + div +css 美化)