Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了原生 js 实现 tab 选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
1.html 部分
- <body>
- <div id="tab">
- <div class="tab_menu">
- <ul>
- <li class="selected">
- <a href="#">
- 时事
- </a>
- </li>
- <li>
- <a href="#">
- 体育
- </a>
- </li>
- <li>
- <a href="#">
- 娱乐
- </a>
- </li>
- </ul>
- </div>
- <div class="tab_box">
- <div>
- 时事
- </div>
- <div class="hide">
- 体育
- </div>
- <div class="hide">
- 娱乐
- </div>
- </div>
- </div>
- </body>
2.CSS 部分:样式部分实现方法多种多样,这是我写的简单的 demo,我最不擅长的 css ><...
- .tab_menu.selected {
- background - color: #aaa;
- }.tab_menu ul {
- height: 30px;
- }.tab_menu ul li {
- float: left;
- list - style: none;
- width: 50px;
- height: 30px;
- color: #000;
- border: solid 1px gray;
- border - bottom: none;
- text - align: center;
- line - height: 30px;
- margin - right: 3px;
- }.tab_menu ul li a {
- text - decoration: none;
- }.tab_box {
- width: 170px;
- height: 150px;
- border: solid 1px gray;
- }.tab_box.hide {
- display: none;
- }
3. 重要的 js 部分:
- window.onload=function(){
- var oTab=document.getElementById('tab');
- var aLi=oTab.getElementsByTagName('li');
- var oTabBox=oTab.getElementsByTagName('div')[1];
- var aBox=oTabBox.getElementsByTagName('div');
- for(var i=0;i<aLi.length;i++){
- aLi[i].index=i;
- aLi[i].onclick=function(){
- for(var j=0;j<aLi.length;j++){
- aLi[j].className='';//取消菜单样式
- aBox[j].className='hide';//隐藏所有的tabDiv
- }
- aLi[this.index].className='selected';
- aBox[this.index].className='';
- }
- }
- }
这个简单粗暴,完全没有考虑如果 tabMenu、tabBox 有多个样式的情况,不适应项目只是一个思路。很多地方需要完善。下面考虑标签多个 class 的情况,不过一般都有多个 class,现在就要用到去除某个 class,添加 class 的技能了。
3.1 原生 js 中 class 的添加及删除。
- window.onload=function(){
- var oTab=document.getElementById('tab');
- var aLi=oTab.getElementsByTagName('li');
- var oTabBox=oTab.getElementsByTagName('div')[1];
- var aBox=oTabBox.getElementsByTagName('div');
- for(var i=0;i<aLi.length;i++){
- aLi[i].index=i;
- aLi[i].onclick=function(){
- for(var j=0;j<aLi.length;j++){
- var aClass=aLi[j].className.split(' ');//元素.className是一个字符串,切割成数组
- var aClass1=aBox[j].className.split(' ');//同样的方法得到box的
- for(var z=0;z<aClass.length;z++){
- if(aClass[z]=='selected'){
- aClass.splice(z,1);//利用数组的splice方法删除找到的这个类
- }
- }
- for(var k=0;k<aClass1.length;k++){
- if(aClass1[k]=='hide'){
- aClass1.splice(k,1);
- }
- }
- aLi[j].className=aClass.join(' ');//所有的menu都去除selected样式
- aBox[j].className+=' hide';//所有box都隐藏
- aBox[this.index].className=aClass1.join(' ');//当前box显示
- aLi[this.index].className+=' selected';//当前menu添加select样式
- }
- }
- }
- }
亲测有效,不过都写在一个方法里有点乱,而且类多的时候效率也是问题,不过类应该不很很多吧 == 以后再优化吧,这个功能用 jquery 很简单。
来源: http://www.phperz.com/article/17/0707/332223.html