javascript控制制作tab选项卡(兼容ie6,FF,chrome等)

今天分享一个javascript制作选项卡的代码。所以自己尝试做了,以前一般都是用CSS做的,现在用js做,虽然很简单,不过要考虑到它的可维护性和可重复性,扩展性就要多考虑一些东西了。
   下面是我写的代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>js控制tab选项卡效果</title>
  5. <style type="text/css">
  6. *{margin:0 auto;padding:0;}
  7. ul{list-style-type:none;width:200px;height:20px;}
  8. ul li{display:block;width:50px;height:20px;float:left;cursor:pointer;}
  9. .clear{clear:both;}
  10. #content{position:relative;}
  11. .tab0,.tab1,.tab2,.tab3,#content{width:200px;height:200px;}
  12. .tab0,.tab1,.tab2,.tab3{position:relative;}
  13. .tab0{background:#ccc;display:block;}
  14. .tab1{background:#06f;display:none;}
  15. .tab2{background:#f60;display:none;}
  16. .tab3{background:pink;display:none;}
  17. </style>
  18. </head>
  19. <body>
  20. <ul id="menu">
  21. <li style="background:#ccc;" name="t" id="t" onclick="is_click(0);">tab1</li>
  22. <li style="background:#06f;" name="t" id="t" onclick="is_click(1);">tab2</li>
  23. <li style="background:#f60;" name="t" id="t" onclick="is_click(2);">tab3</li>
  24. <li style="background:pink;" name="t" id="t" onclick="is_click(3);">tab4</li>
  25. </ul>
  26. <div class="clear"></div>
  27. <div id="content">
  28. <div name="tab" id="tab" class="tab0">0</div>
  29. <div name="tab" id="tab" class="tab1">1</div>
  30. <div name="tab" id="tab" class="tab2">4</div>
  31. <div name="tab" id="tab" class="tab3">3</div>
  32. </div>
  33. <script type="text/javascript">
  34. var li=document.getElementsByName("t");
  35. var divs=document.getElementsByName("tab");
  36. function is_click(i){
  37. for(var j=0;j<li.length;j++)    {
  38. if(j != i){
  39. divs[j].style.display="none";
  40. }else{
  41. divs[j].style.display="block";
  42. }
  43. }
  44. }
  45. </script>
  46. </body>
  47. </html>

点击相应的标题就会显示相应的内容。
哈哈,做好了以后去看了看网上其他人做的淘宝开店tab选项卡后,发现还是我的比较简洁,美啊
可是测试的时候我发现了一个问题
没有ID,只有Name的话,IE下getElementsByName()不能工作,而FF正常。
没有Name人生感悟属性,只有ID的话,IE下getElementsByName()正常,而FF不能工作。
所以我为每一个元素都加上了相同的id和name,这样就兼容了。IE6下也可以完美的工作了
所以,以后如果在遇到用了getElementsByName(),明明有name属性,但在IE中却不能起效,在其他浏览器中却可以起效,不用怀疑,肯定是getElementsByName()这里有问题了,赶紧加个相同值的ID吧!

时间: 2024-10-25 19:16:43

javascript控制制作tab选项卡(兼容ie6,FF,chrome等)的相关文章

语音控制的tab选项卡

前端开发whqet,csdn,王海庆,whqet,前端开发专家 ladies and 乡亲们,程序猿同志们,周末仍然坚守工作岗位,或者学习不辍的童鞋们,福音来了. 语音识别高不高端.难不难? 今天给大家推荐一个简单易用的js实现的语音识别框架annyang,然后一个案例示范使用. 在线案例,下载收藏. annyang是一个能够实现语音识别的js类库,小巧易用(只2k),兼容中文.接下来我们看看怎么使用. 首先导入该annyang库,能够使用CDN的方式,也能够下载来使用. <!--下载到本地使用

【JavaScript】纯粹javascript无任何插件的兼容IE6的模态框modal

模态框这东西在很多前端框架里面也是存在的,但是很多前端框架,如Bootstrap,AmazeUI,Jquery对IE6的兼容性极其糟糕,因此如果自己手写一个纯粹javascript无任何插件的的模态框,不仅能够兼容IE6,对其它浏览器很有很大的兼容性,同时,也好改. 一.基本目标 比如如下的模态框,怎么用在纯粹html+css+javascript,在无任何前端插件的情况下实现呢? 可以看到效果图,是在IETester的IE6模式中进行的,没有任何问题. 我还在这个模态框里面镶嵌了一个表单.反正

:target伪类制作tab选项卡

:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: 1 <div> 2 <a href="#demo1">点击此处</a> 3 </div> 4 <div id="demo1">测试结果</div> CSS代码: 1 :target{ 2 color: #343434; 3 border: 1px solid red; 4 background-color

原生js绑定和解绑事件,兼容IE,FF,chrome

主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解除这个事件.贴上代码,这个是可以运行的,兼容 IE FF chrome 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu

关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助 Firefox 和 IE 的浏览器各自实现了input历史记录的功能,可以简化输入时的麻烦,但是,有时候弹出的下拉框会挡住页面显示内容,而且在某些情况下也不需要对input框进行记录,如号码查询的input框,用户不会对同一个号码进行多次查询,就没有必要让浏览器记录. MSIE自定义了input 的扩展属性 autocomplete,置为off即可 <input typ

js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() {

JavaScript阻止事件冒泡(兼容IE、Chrome、FF)

这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>阻止事件冒泡</title> <scr

原生javascript 改写的tab选项卡

<!--css部分--> <style> *{ margin: 0; padding: 0; } ul,li{ list-style: none } .tabbox{ width: 600px; clear: both; overflow: hidden; margin: 0 auto; border: 1px solid #ccc; } ul.tabnav{ width: 600px; height: 30px; border-bottom: 1px solid #ccc; }

dom 回到顶部(兼容IE FF Chrome)

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #wrap{ height:2000px; background:pink; position:relative; } #ontop{ position:absolute; bottom:0px; right:0px; background: