html： 原生javascript实现选项卡
2020-08-23 本文已影响0人
生信云笔记
前言
我觉得html中一个比较实用的功能就是选项卡，选择哪一个就显示对应的内容，感觉挺舒适的。用在页面布局上也是不错的选择。
那么选项卡到底是什么的样呢？下面我们来直观的看一下，如下图所示就是一个简单的选项卡，共有四个选项，选择哪一个选项就对应地显示相应的内容，如下截图所示：
那么对于这样的选项卡功能如何实现呢？用原生的javascript就可以实现的，而且实现起来也不难，主要记住三个要点，第一个要点是排他思想，要用原生的javascript实现选项卡，就是通过排他思想的理念来实现的，所以这个思想很重要，在这里具体一点说就是把选项分成两种状态，一种是选中的状态，另一种是没有选中的状态；还有两个要点其实是实现排他思想的技术关键，一个是双重for循环，另外一个是自定义属性。下面来看一下具体如何实现吧，具体代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡练习</title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;font:12px/1.5 arial;/* 字体12像素 行高 1.5em 字体 Arial */ }
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#hlist{height:40px; width:500px; border:1px solid #ccc;border-bottom: none}
#hlist li{float:left; width:125px; line-height:40px; text-align:center; background:#d7d7d7; cursor:pointer}
#hlist .selected{border-bottom:none; background:#fff;}
#cdivs{width:500px; border:1px solid #ccc; border-top:none; text-align:center; line-height:200px;}
</style>
<script type="text/javascript">
window.onload=function(){
var hlist = document.getElementById('hlist').getElementsByTagName('li');
var cdivs =document.getElementById('cdivs').getElementsByTagName('div');
for(var i=0;i<hlist.length;i++){
hlist[i].index=i;
hlist[i].onclick=function(){
for(var i=0;i<hlist.length;i++){
hlist[i].className='';
cdivs[i].className='hide';
}
this.className='selected';
cdivs[this.index].className='';
}
}
}
</script>
</head>
<body>
<div class="wrap">
<!-- The menu options -->
<div id="hlist">
<ul>
<li class="selected">选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
</ul>
</div>
<!-- The content box -->
<div id="cdivs">
<div>既往不恋：不要老是想着过去的事物，过去的就让它随风去吧！</div>
<div class='hide'>当下不杂：心里不要想着其他的事，专心做好当下的事！</div>
<div class='hide'>未来不迎：没有发生的事不要想太多，不去忧虑太多！</div>
<div class='hide'>好好搬砖：不要想那么多，八月的砖显得格外的烫手！</div>
</div>
</div>
</body>
</html>
上面的代码就是实现了如下截图所示的选项卡功能，其中将菜单和内容框绑定，然后通过上面说的三个要点，一个中心思想，两个技术要点来实现选项功能，最终到达点击菜单选项显示对应内容的效果。最终效果如下所示：
最后
emm，整体效果实现了，我这里设置的是单击鼠标切换选项卡，如果你想鼠标移入就切换选项直接将“onclick”替换为“onmouseover”就可以实现了。今天就分享到这里了。
