أبسط طريقة لتنفيذ تبديل صفحة علامة التبويب في جافا سكريبت النقية (الموصى بها)

： ：

HTML:

 <div> <h2 id = "tab1" onMouseover = "changetab1 ()"> 1 </h2> <h2 id = "tab2" onMouseover = "changetab2 ()"> 2 </h2> <h2 id = "tab3" onMouseover = "changetab3 () id = "c2"> content2 </viv> <div id = "c3"> content3 </viv> </viv>

CSS:

 H2 {الحدود الحدود: الصلبة ذرة الزعنفة 1px ؛ اليسار الحدودي: الصلبة ذرة الذراع 1px ؛ العرض: 50px ؛ الارتفاع: 25px ؛ الهامش: 0 ؛ عائم: يسار ؛ النص-align: center ؛}. tab-content {border: solid cornflowerblue 1px ؛ width: 152px ؛ quight: 100px ؛ {خلفية اللون: cornflowerblue ؛}. Tab-Content .Show {display: block ؛}

JS:

 var tab1 = document.getElementById ('tab1') ، tab2 = document.getElementById ('tab2') ، tab3 = document.getElementById ('tab3') ، c1 = document.getElementById ('c1') ، c2 = document.getElementByid ('c2') ، c3 = document.getelementById ('c3') ؛ {tab1.classname = 'select' ؛ tab2.className = '' ؛ tab3.className = '' ؛ c1.classname = 'show'c2.classname =' '؛ c3.classname =' '؛ "'؛ c2.className =' show '؛ c3.classname =' '؛} وظيفة changetab3 () {tab1.classname =' '

： ：

tab tab 的切换 ， 我们很容易想到的一种方式就是给每一个要控制的标签添加 id ， 然后分别编写鼠标事件 ， 使用 获取每个元素 获取每个元素 ， 精确地控制每个元素的样式。 精确地控制每个元素的样式。

这种方式的缺点显而易见 ， 有几个元素就有几个 有几个元素就有几个 ， 每个 tab 都要编写 وظيفة ， 里面的方法大同小异。要增加 tab 的话 ， 还要增加 还要增加 和 وظيفة ， 代码冗余 ， 不易扩展。

第二种较为高明些的方法是编写一个 الوظيفة ， 将每个元素的序号传进去。

HTML ：

 <viv> <h2 onMouseover = "changetab (0)"> 1 </h2> <h2 onMouseover = "changetab (1)"> 2 </h2> <h2 onMouseover = "changetab (2)"> 3 </h2> </siv> <viv> content1 </div>

JS ：

 var tabs = document.getElementsByClassName ('tab-head') [0] .getElementsByTagName ('h2') ، المحتويات = document.getElementsByClassName ('tab-content') [0]. الفهرس) {tabs [i] .className = 'select' ؛ contents [i] .className = 'show' ؛} else {tabs [i] .className = '' ؛ contents [i] .className = '' ؛ }}}

这样就只要写一个 وظيفة 了 ， 而且不需要 ， ， 但是还是要按照顺序传递参数。

第三种方式和第二种基本一样 ， هذا 指针。

HTML ：

 <viv> <h2 onMouseover = "changetab (this)"> 1 </h2> <h2 onMouseover = "changetab (this)"> 2 </h2> <h2 onMouseover = "changetab (this)"> 3 </h2> </siv> <viv> content1 </div>

JS ：

 var tabs = document.getElementsByClassName ('tab-head') [0] .getElementsByTagName ('h2') ، المحتويات = document.getElementsByClassName ('tab-content') [0] {if (tabs [i] === tab) {tabs [i] .className = 'select' ؛ contents [i] .classname = 'show' ؛

这种方式稍微方便一些 ， هذا 指针 ， 不用按照顺序传递序号 ， 但这也不是最简便的方式。

： ：

： ：

HTML ：

 <viv> <h2> 1 </h2> <h2> 2 </h2> <h2> 3 </h2> </viv> <viv> <viv> content1 </viv> <viv> content2 </viv> <iv> content3 </viv> </viv>

JS ：

 var tabs = document.getElementSbyClassName ('tab-head') [0] .getElementsByTagName ('h2') ، المحتويات = document.getElementsByClassName ('tab-content') [0] .LitsElementsByTagname ('div') ؛ {tabs [i] .onmouseover = showtab ؛}}) () ؛ وظيفة showtab () {for (var i = 0 ، len = tabs.length ؛ i <len ؛ i ++) {if (tabs [i] === this) {i] .classname = 'contents [i] '' ؛ محتويات [i] .classname = '' ؛}}}

这样 JS 、 html 、 css 就完全分离了 ， 通过 tab 指针就可以判断当前鼠标滑过的是哪一个 tab 了。

以上所述是小编给大家介绍的最简单纯 JavaScript 实现 Tab 标签页切换的方式 (推荐) ， 希望对大家有所帮助 ， 如果大家有任何疑问请留言 ， 小编会及时回复大家的 ， 在此也非常感谢大家对武林网网站的支持！