简单的选项卡（html + css + js）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选型卡</title>
<style type="text/css">
ul.btn-box{font-size: 0;margin-bottom: 20px;}
ul.btn-box li{display: inline-block; width: 80px;height: 34px;line-height: 34px;font-size: 14px;color: #424242; border: 1px solid #ddd;border-radius: 4px;text-align: center;margin: 0 5px;cursor: pointer;}
ul.btn-box li.li-curr{background: #FF4747;border-color: #FF4747;color: #fff;}
.img{width: 420px;height: 320px;border: 1px solid #ddd;background: #fafafa; display: none;}
.img img{display: block;margin: 10px 10px;}
</style>
</head>
<body>
<div class="img-box">
<ul class="btn-box">
<li class="li-curr">中国</li>
<li>韩国</li>
<li>日本</li>
<li>美国</li>
</ul>
<div class="img" style="display: block;">
<img src="images/scenery_picture_01.png" />
</div>
<div class="img">
<img src="images/scenery_picture_02.png" />
</div>
<div class="img">
<img src="images/scenery_picture_03.png" />
</div>
<div class="img">
<img src="images/scenery_picture_04.png" />
</div>
</div>
<script type="text/javascript">
var liBox = document.getElementsByTagName('li');
var picBox = document.getElementsByClassName('img');
for (var i = 0; i < liBox.length; i ++) {
(function(n){
liBox
.onclick = function(){
for (var j = 0; j < liBox.length; j ++) {
liBox[j].className = "";
picBox[j].style.display = "none";
}
this.className = "li-curr";
picBox
.style.display = "block";
}
}(i))
}
</script>
</body>
</html>
- 点赞
- 收藏
- 分享
- 文章举报
DreamsAndLink
发布了1 篇原创文章 · 获赞 0 · 访问量 17
私信
关注
- JS使图片在图片框中自适应，按比例缩放
- JS简易拖拽效果
- Js中 关于top、clientTop、scrollTop、offsetTop的用法
- js日期的常用操作
- JS实现以日历形式显示当前时间
- 完整显示当前日期和时间的JS代码（2007年2月25日星期日正午12:42:48）
- JS左侧菜单-04
- JS关闭当前页面的方法
- C#代码和javascript函数相互调用
- JavaScript学习笔记
- java C# javascript css 资源共享
- jsp页面使用jstl表示时，注意事项
- servlet到jsp页面出现乱码，原因
- XStream完美转换XML、JSON
- JavaScriptCore.framework基本用法（一）
- JavaScriptCore.framework基本用法（二）
- （NSScanner的使用）替换服务器获取的JSON数据中的换行符（JSON是不能解析带有换行符字符串）...
- JavaScript - 垃圾回收机制GC - 小四@王云飞
- Watir: How can I execute in a watir script a specific javascript function called
- .NET利用jqury+ajax+json方式实现的数据分页