查看: 2113|回复: 0

[DIV/CSS] 标签页(tab)切换的原生js,jquery和bootstrap实现

发表于 2018-2-27 08:19:07
概述

这是我在学习课程Tab选项卡切换效果时做的总结和练手。

原课程中只有原生js实现,jquerybootstrap实现是我自己补上的。

本节内容 标签页(tab)切换的原生js实现 标签页(tab)切换的jquery实现 标签页(tab)切换的bootstrap实现 标签页(tab)切换的原生js实现

标签页(tab)切换的原生`js`实现

说明:

代码是我自己写的,与课程中的不一样。 主要利用display:none来把部分内容隐藏而显示其它内容。 遇到了事件的循环绑定,我是利用添加id使其成为钩子来解决的。

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>tab切换</title>
  6. <style type="text/css">
  7. *{
  8. font-family: Times;
  9. }
  10. #main {
  11. font-size: 13px;
  12. height: 100px;
  13. width: 300px;
  14. border: 1px solid #c0c0c0;
  15. }
  16. #top_column {
  17. height: 30px;
  18. width: 300px;
  19. }
  20. #top_column div {
  21. height: 30px;
  22. width: 75px;
  23. background-color: #fffff0;
  24. text-align: center;
  25. line-height: 30px;
  26. border: 1px solid #c0c0c0;
  27. margin: -1px -1px 0px -1px;
  28. }
  29. #top_column div:hover {
  30. background-color: #fff;
  31. font-weight:bold;
  32. color: orange;
  33. }
  34. .top_column_hover {
  35. background-color: #fff;
  36. font-weight:bold;
  37. color: orange;
  38. }
  39. #bottom_column {
  40. height: 70px;
  41. width: 300px;
  42. }
  43. #bottom_column a {
  44. height: 35px;
  45. width: 140px;
  46. display: block;
  47. text-align: left;
  48. text-decoration: none;
  49. outline: none;
  50. color: black;
  51. line-height: 35px;
  52. padding-left: 10px;
  53. float: left;
  54. }
  55. #bottom_column a:hover {
  56. color: orange;
  57. }
  58. #main div {
  59. float: left;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <div id="main">
  65. <div id="top_column">
  66. <div class="column_notice">公告</div>
  67. <div class="column_rule">规则</div>
  68. <div class="column_forum">论坛</div>
  69. <div class="column_security">安全</div>
  70. </div>
  71. <div id="bottom_column">
  72. <div class="content_notice" style="display:block">
  73. <a href="#" class="notice1">颠覆式创新</a>
  74. <a href="#" class="notice2">旗舰来了</a>
  75. <a href="#" class="notice3">全国首测</a>
  76. <a href="#" class="notice4">千年一遇</a>
  77. </div>
  78. <div class="content_rule" style="display:none">
  79. <a href="#" class="rule1">司机高速</a>
  80. <a href="#" class="rule2">北欧村名</a>
  81. <a href="#" class="rule3">高校老师</a>
  82. <a href="#" class="rule4">公安工作组</a>
  83. </div>
  84. <div class="content_forum" style="display:none">
  85. <a href="#" class="forum1">百度贴吧</a>
  86. <a href="#" class="forum2">哈尔滨</a>
  87. <a href="#" class="forum3">麦当劳</a>
  88. <a href="#" class="forum4">光头哥</a>
  89. </div>
  90. <div class="content_security" style="display:none">
  91. <a href="#" class="security1">经纪人</a>
  92. <a href="#" class="security2">以上处于</a>
  93. <a href="#" class="security3">国足领队</a>
  94. <a href="#" class="security4">国务院</a>
  95. </div>
  96. </div>
  97. </div>
  98. <script type="text/javascript">
  99. window.onload=tab;
  100. function tab(){
  101. var top_column=document.getElementById("top_column").getElementsByTagName("div");
  102. var bottom_column=document.getElementById("bottom_column").getElementsByTagName("div");
  103. for(var i=0;i<top_column.length;i++){
  104. top_column[i].id=i;
  105. top_column[i].onmouseover=function(){
  106. tab_content(this.id);
  107. }
  108. }
  109. function tab_content(i){
  110. for(var j=0;j<top_column.length;j++){
  111. top_column[j].className="top_column_not_hover";
  112. bottom_column[j].style.display="none";
  113. }
  114. top_column[i].className="top_column_hover";
  115. bottom_column[i].style.display="block";
  116. }
  117. }
  118. </script>
  119. </body>
  120. </html>
复制代码
标签页(tab)切换的jquery实现

标签页(tab)切换的`jquery`实现

说明:

效果其实和原生js实现是一样的。

因为我想写一下jquery代码练练手,所以只是把原生js实现中的js代码改成了jquery的形式。

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>tab切换</title>
  6. <style type="text/css">
  7. *{
  8. font-family: Times;
  9. }
  10. #main {
  11. font-size: 13px;
  12. height: 100px;
  13. width: 300px;
  14. border: 1px solid #c0c0c0;
  15. }
  16. #top_column {
  17. height: 30px;
  18. width: 300px;
  19. }
  20. #top_column div {
  21. height: 30px;
  22. width: 75px;
  23. background-color: #fffff0;
  24. text-align: center;
  25. line-height: 30px;
  26. border: 1px solid #c0c0c0;
  27. margin: -1px -1px 0px -1px;
  28. }
  29. #top_column div:hover {
  30. background-color: #fff;
  31. font-weight:bold;
  32. color: orange;
  33. }
  34. .top_column_hover {
  35. background-color: #fff;
  36. font-weight:bold;
  37. color: orange;
  38. }
  39. #bottom_column {
  40. height: 70px;
  41. width: 300px;
  42. }
  43. #bottom_column a {
  44. height: 35px;
  45. width: 140px;
  46. display: block;
  47. text-align: left;
  48. text-decoration: none;
  49. outline: none;
  50. color: black;
  51. line-height: 35px;
  52. padding-left: 10px;
  53. float: left;
  54. }
  55. #bottom_column a:hover {
  56. color: orange;
  57. }
  58. #main div {
  59. float: left;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <div id="main">
  65. <div id="top_column">
  66. <div class="column_notice">公告</div>
  67. <div class="column_rule">规则</div>
  68. <div class="column_forum">论坛</div>
  69. <div class="column_security">安全</div>
  70. </div>
  71. <div id="bottom_column">
  72. <div class="content_notice" style="display:block">
  73. <a href="#" class="notice1">颠覆式创新</a>
  74. <a href="#" class="notice2">旗舰来了</a>
  75. <a href="#" class="notice3">全国首测</a>
  76. <a href="#" class="notice4">千年一遇</a>
  77. </div>
  78. <div class="content_rule" style="display:none">
  79. <a href="#" class="rule1">司机高速</a>
  80. <a href="#" class="rule2">北欧村名</a>
  81. <a href="#" class="rule3">高校老师</a>
  82. <a href="#" class="rule4">公安工作组</a>
  83. </div>
  84. <div class="content_forum" style="display:none">
  85. <a href="#" class="forum1">百度贴吧</a>
  86. <a href="#" class="forum2">哈尔滨</a>
  87. <a href="#" class="forum3">麦当劳</a>
  88. <a href="#" class="forum4">光头哥</a>
  89. </div>
  90. <div class="content_security" style="display:none">
  91. <a href="#" class="security1">经纪人</a>
  92. <a href="#" class="security2">以上处于</a>
  93. <a href="#" class="security3">国足领队</a>
  94. <a href="#" class="security4">国务院</a>
  95. </div>
  96. </div>
  97. </div>
  98. <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
  99. <script type="text/javascript">
  100. $(window).load(function(){
  101. var $top_column=$("#top_column div");
  102. var $bottom_column=$("#bottom_column div");
  103. $.each($top_column,function(i,item){
  104. $(item).hover(tab_content);
  105. })
  106. function tab_content(){
  107. $.each($top_column,function(i,item){
  108. $(item).attr("class", "top_column_not_hover");
  109. })
  110. $.each($bottom_column,function(i,item){
  111. $(item).hide();
  112. })
  113. var index=$top_column.index($(this));
  114. $bottom_column.eq(index).show();
  115. $top_column.eq(index).attr("class", "top_column_hover");
  116. }
  117. })
  118. </script>
  119. </body>
  120. </html>
复制代码
标签页(tab)切换的bootstrap实现

标签页(tab)切换的`bootstrap`实现

说明:

代码中不需要额外写js,只需引用jquerybootstrap文件即可。 虽然不需要写js,但是缺点是需要点击,并且鼠标离开后回复原状,解决这些问题的话需要写js。 虽然bootstrap看起来很华丽,而且很简便。但是在一些小改动上面很麻烦,而且会踩很多坑。所以如果需要细致并且频繁修改网站的话,不建议用bootstrap搭建网站。 踩坑记录:box-sizing 属性的content-boxborder-box(其实这也是盒模型的基本)。

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>tab切换</title>
  6. <style type="text/css">
  7. *{
  8. font-family: Times;
  9. }
  10. #main {
  11. font-size: 13px;
  12. height: 100px;
  13. width: 300px;
  14. border: 1px solid #c0c0c0;
  15. margin:10px 10px;
  16. box-sizing: content-box;
  17. }
  18. #myTab {
  19. height: 30px;
  20. width: 300px;
  21. }
  22. #myTab div {
  23. height: 30px;
  24. width: 75px;
  25. background-color: #fffff0;
  26. text-align: center;
  27. line-height: 30px;
  28. border: 1px solid #c0c0c0;
  29. margin: -1px -1px 0px -1px;
  30. box-sizing: content-box;
  31. }
  32. #myTab div:hover {
  33. background-color: #fff;
  34. font-weight:bold;
  35. color: orange;
  36. cursor: pointer;
  37. }
  38. #myTabContent {
  39. height: 70px;
  40. width: 300px;
  41. }
  42. #myTabContent a {
  43. height: 35px;
  44. width: 140px;
  45. display: block;
  46. text-align: left;
  47. text-decoration: none;
  48. outline: none;
  49. color: black;
  50. line-height: 35px;
  51. padding-left: 10px;
  52. float: left;
  53. }
  54. #myTabContent a:hover {
  55. color: orange;
  56. }
  57. #main div {
  58. float: left;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <div id="main">
  64. <div id="myTab" class="nav nav-tabs">
  65. <div href="#notice" data-toggle="tab">公告</div>
  66. <div href="#rule" data-toggle="tab">规则</div>
  67. <div href="#forum" data-toggle="tab">论坛</div>
  68. <div href="#security" data-toggle="tab">安全</div>
  69. </div>
  70. <div id="myTabContent" class="tab-content">
  71. <div class="tab-pane fade in active" id="notice">
  72. <a href="#" class="notice1">颠覆式创新</a>
  73. <a href="#" class="notice2">旗舰来了</a>
  74. <a href="#" class="notice3">全国首测</a>
  75. <a href="#" class="notice4">千年一遇</a>
  76. </div>
  77. <div class="tab-pane fade" id="rule">
  78. <a href="#" class="rule1">司机高速</a>
  79. <a href="#" class="rule2">北欧村名</a>
  80. <a href="#" class="rule3">高校老师</a>
  81. <a href="#" class="rule4">公安工作组</a>
  82. </div>
  83. <div class="tab-pane fade" id="forum">
  84. <a href="#" class="forum1">百度贴吧</a>
  85. <a href="#" class="forum2">哈尔滨</a>
  86. <a href="#" class="forum3">麦当劳</a>
  87. <a href="#" class="forum4">光头哥</a>
  88. </div>
  89. <div class="tab-pane fade" id="security">
  90. <a href="#" class="security1">经纪人</a>
  91. <a href="#" class="security2">以上处于</a>
  92. <a href="#" class="security3">国足领队</a>
  93. <a href="#" class="security4">国务院</a>
  94. </div>
  95. </div>
  96. </div>
  97. <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
  98. <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
  99. <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
  100. <script type="text/javascript">
  101. </script>
  102. </body>
  103. </html>
复制代码


回复

使用道具 举报