javascript制作选项卡
来源：互联网 发布：cae软件培训 编辑：程序博客网 时间：2024/06/08 06:17
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;border:0}
#div1{width:300px;height:300px;background-color:green;}
#div2{height:50px;background-color:red}
#div2 li{float:left;list-style:none;height:50px;width:72px;text-align:center;line-height:50px;background-color:orange;margin-right:3px;}
</style>
<meta charset="utf-8"/>
</head>
<body>
<div id="div1">
<div id="div2">
<ul>
<li id="bt1" onclick="show(1)" style="background-color:green">新闻</li>
<li id="bt2" onclick="show(2)" >体育</li>
<li id="bt3" onclick="show(3)">音乐</li>
<li id="bt4" onclick="show(4)">娱乐</li>
</ul>
</div>
<div id="div3">
<p id="p1">就爱看了发生的快乐十分</p>
<p id="p2" style="display:none">体育</p>
<p id="p3" style="display:none">音乐</p>
<p id="p4" style="display:none">娱乐</p>
</div>
</div>
</body>
<script>
function show(n){
for(var i=1;i<=4;i++){
document.getElementById("bt"+i).style.backgroundColor='orange';
document.getElementById("p"+i).style.display='none';
}
document.getElementById("bt"+n).style.backgroundColor='green';
document.getElementById("p"+n).style.display='block';
}
</script>
</html>
<head>
<style type="text/css">
*{margin:0;padding:0;border:0}
#div1{width:300px;height:300px;background-color:green;}
#div2{height:50px;background-color:red}
#div2 li{float:left;list-style:none;height:50px;width:72px;text-align:center;line-height:50px;background-color:orange;margin-right:3px;}
</style>
<meta charset="utf-8"/>
</head>
<body>
<div id="div1">
<div id="div2">
<ul>
<li id="bt1" onclick="show(1)" style="background-color:green">新闻</li>
<li id="bt2" onclick="show(2)" >体育</li>
<li id="bt3" onclick="show(3)">音乐</li>
<li id="bt4" onclick="show(4)">娱乐</li>
</ul>
</div>
<div id="div3">
<p id="p1">就爱看了发生的快乐十分</p>
<p id="p2" style="display:none">体育</p>
<p id="p3" style="display:none">音乐</p>
<p id="p4" style="display:none">娱乐</p>
</div>
</div>
</body>
<script>
function show(n){
for(var i=1;i<=4;i++){
document.getElementById("bt"+i).style.backgroundColor='orange';
document.getElementById("p"+i).style.display='none';
}
document.getElementById("bt"+n).style.backgroundColor='green';
document.getElementById("p"+n).style.display='block';
}
</script>
</html>
- javascript制作选项卡
- JavaScript原生选项卡制作附新浪选项卡案例
- jquery制作选项卡
- 选项卡制作学习
- js选项卡制作
- js选项卡制作
- js 选项卡制作
- html制作选项卡
- 选项卡制作
- axure7 制作选项卡
- 选项卡的制作
- 用CSS制作选项卡
- JQuery制作简单选项卡
- css_jsp制作页面选项卡
- js简易选项卡制作
- EasyUI的选项卡制作
- JQuery 网页选项卡制作
- 仿网易选项卡制作
- 使用JNI进行Java与C/C++语言混合编程(1)--在Java中调用C/C++本地库
- 名企招聘经典面试编程题集锦[第11-20题]
- Java序列化算法透析
- CF 272B Dima and Sequence
- 使用js文本域输入查过100字符后提示
- javascript制作选项卡
- javascript发表日志系统制作
- Oracle零碎要点---多表联合查询,收集数据库基本资料
- Windows 8 下Internet Explorer 10（IE10含Metro） 无法打开（闪退）或需要管理员权限打开
- JVM堆内存结构浅析
- javascript全选反选全不选各种选最简单的制作方法
- memcpy(从参数2复制参数3个字符到参数1中)
- JAVA 静态代码块
- 统计输入内容的长度
