<!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>无标题文档</title>
<script language="javascript">
function tags(obj){
var uls = document.getElementsByTagName('ul');
for(var i=0;i<uls.length;i++){
uls[i].className='unselected';
}
obj.className='selected';
document.getElementById('one').className = 'divunselectd';
document.getElementById('two').className = 'divunselectd';
document.getElementById('three').className = 'divunselectd';
if('a' == obj.id){
document.getElementById('one').className = 'divselectd';
}else if('b' == obj.id){
document.getElementById('two').className = 'divselectd';
}else {
document.getElementById('three').className = 'divselectd';
}
}
</script>
<style type="text/css">
.selected{
background-color:#FFFF00;
border:#FF0000 1px solid;
}
.unselected{
background-color:#00FF00;
}
.divselectd{
display:'';
background-color:yellow;
width:50%;
}
.divunselectd{
display: none;
background-color:yellow;
width:50%;
}
</style>
</head>
<body>
<div style="text-align:center; float:left; width:100%;" align="center" >
<ul style="float:left" onclick="tags(this);" class="selected" id="a" style="margin-left:0px; margin-right:3px;">one</ul>
<ul style="float:left" onclick="tags(this);" class="unselected" id="b" style="margin-left:2px; margin-right:3px;">two</ul>
<ul style="float:left" onclick="tags(this);" class="unselected" id='c' style="margin-left:2px;">three</ul>
</div>
<div id="one" class="divselectd">one</div>
<div id="two" class="divunselectd">two</div>
<div id="three" class="divunselectd">three</div>
</body>
</html>
分享到:
相关推荐
修正了原来《http://download.csdn.net/download/guo8ke/1512418》的bug,本选项卡是自行编写的选项卡代码, 可以动态生成选显卡,关闭选项卡, 每个选项卡 对应也可页面。...本选项卡代码经过测试,兼容IE和火狐。
本选项卡是自行编写的选项卡代码, 可以动态生成选显卡,关闭选项卡, 每个选项卡 对应也可页面。点击选项卡之后,显示对应的页面内容。当选项卡超出了 选项卡显示栏的宽度时,可以点左右移动的按钮,来移动选项卡。...
用作大家学习参考
js简易选项卡
js+css实现切换选项卡代码,非常简单,直接修改页面中的代码,即可达到想要的效果。
javascript实现选项卡功能 javascript实现选项卡功能
js实现的简单选项卡特效。自由切换。喜欢的朋友欢迎下载
javascript网页中实现选项卡效果特效
HTML调用JS实现多项滑动门选项卡特效 国开电大Dreamweaver网页设计形考任务八答案, 更新版国家开放大学/电大专科《Dreamweaver网页设计》形考任务八。
选项卡js+css选项卡js+css选项卡js+css选项卡js+css选项卡js+css选项卡js+css选项卡js+css选项卡js+css
js+.net实现选项卡
javascript和css+div实现的选项卡效果
CSS+JS实现的选项卡效果(html组件)
一款非常简单的tab标签切换代码,只需一段非常简易的js代码即可实现,简单不复杂,很轻巧,懒人之家推荐下载
鼠标划过停留选项卡切换。可以设置鼠标停留时间,设置成0将不停留,鼠标划过切换。简单方便。可以便利。注意循环的时候ID控制。效果演示:时间设置为0的效果演示http://tangshanit.com.cn/help/webmap.aspx
形考任务八 HTML 调用js实现多项滑动门选项卡特效。
用asp.net css js实现选项卡的效果
js选项卡 js选项切换js选项卡 js选项切换js选项卡 js选项切换
jquery tab插件制作多功能选项卡,鼠标滑过切换选项卡、鼠标点击切换选项卡、自动切换选项卡、支持数据回调功能,也可以与其他插件结合jquery.lazyload,制作选项卡切换图片延迟加载等
一个很漂亮很实用的选项卡,很好很好很好很好很好 确实很好,确实很好,到处都有