html制作顶部选项卡,html： 原生javascript实现选项卡

前言

我觉得html中一个比较实用的功能就是选项卡，选择哪一个就显示对应的内容，感觉挺舒适的。用在页面布局上也是不错的选择。

那么选项卡到底是什么的样呢？下面我们来直观的看一下，如下图所示就是一个简单的选项卡，共有四个选项，选择哪一个选项就对应地显示相应的内容，如下截图所示：

那么对于这样的选项卡功能如何实现呢？用原生的javascript就可以实现的，而且实现起来也不难，主要记住三个要点，第一个要点是排他思想，要用原生的javascript实现选项卡，就是通过排他思想的理念来实现的，所以这个思想很重要，在这里具体一点说就是把选项分成两种状态，一种是选中的状态，另一种是没有选中的状态；还有两个要点其实是实现排他思想的技术关键，一个是双重for循环，另外一个是自定义属性。下面来看一下具体如何实现吧，具体代码如下：

选项卡练习

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;}

window.οnlοad=function(){

var hlist = document.getElementById('hlist').getElementsByTagName('li');

var cdivs =document.getElementById('cdivs').getElementsByTagName('div');

for(var i=0;i

hlist[i].index=i;

hlist[i].οnclick=function(){

for(var i=0;i

hlist[i].className='';

cdivs[i].className='hide';

}

this.className='selected';

cdivs[this.index].className='';

}

}

}

• 选项一
• 选项二
• 选项三
• 选项四

既往不恋：不要老是想着过去的事物，过去的就让它随风去吧！

当下不杂：心里不要想着其他的事，专心做好当下的事！

未来不迎：没有发生的事不要想太多，不去忧虑太多！

好好搬砖：不要想那么多，八月的砖显得格外的烫手！

上面的代码就是实现了如下截图所示的选项卡功能，其中将菜单和内容框绑定，然后通过上面说的三个要点，一个中心思想，两个技术要点来实现选项功能，最终到达点击菜单选项显示对应内容的效果。最终效果如下所示：

最后

emm，整体效果实现了，我这里设置的是单击鼠标切换选项卡，如果你想鼠标移入就切换选项直接将“onclick”替换为“onmouseover”就可以实现了。今天就分享到这里了。