วิธีที่ง่ายที่สุดในการใช้การสลับหน้าแท็บแท็บใน JavaScript บริสุทธิ์ (แนะนำ)

先说一下最土的一种方法：

html:

 <div> <h2 id = "tab1" onMouseOver = "changetAb1 ()"> 1 </h2> <h2 id = "tab2" onmouseover = "changetab2 ()"> 2 </h2> <h2 id = "tab3" onmousover = "changetab3 () id = "c2"> content2 </div> <div id = "c3"> content3 </div> </div>

CSS:

 H2 {ขอบด้านบน: cornflowerblue 1px; ขอบซ้าย: cornflowerblue 1px; ความกว้าง: 50px; ความสูง: 25px; ระยะขอบ: 0; ลอย: ซ้าย; {พื้นหลังสี: 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') {tab1.className = 'selected'; tab2.className = ''; tab3.className = ''; c1.className = 'show'c2.className =' '; c3.className =' '}} function changetAb2 () {tab1.className =' ' ''; c1.className = ''; c2.className = 'show'; c3.className = '';} function changetAb3 () {tab1.className = '' tab2.className = '' tab3.className = 'selected'; c1.className = 'c2.className

效果：

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

这种方式的缺点显而易见， 有几个元素就有几个 id， 每个แท็บ都要编写ฟังก์ชั่น， 里面的方法大同小异。要增加แท็บ的话， 还要增加 id 和ฟังก์ชั่น， 代码冗余， 不易扩展。不易扩展。不易扩展。

第二种较为高明些的方法是编写一个ฟังก์ชั่น， 将每个元素的序号传进去。

html：

 <div> <h2 onmouseover = "changetab (0)"> 1 </h2> <h2 onmouseover = "changetab (1)"> 2 </h2> <h2 onmouseover = "changetab (2)"> 3 </h2>

JS：

 var tabs = document.getElementsByClassName ('tab-head') [0] .getElementsByTagname ('H2'), เนื้อหา = document.getElementsByClassName ('tab-content') [0] .getElementByTagname ('div'); ดัชนี) {แท็บ [i] .className = 'เลือก'; เนื้อหา [i] .className = 'show';} else {แท็บ [i] .className = '' เนื้อหา [i] .className = ''; -

这样就只要写一个ฟังก์ชัน了， 而且不需要 id， 但是还是要按照顺序传递参数。

第三种方式和第二种基本一样， 只是参数传递的是นี่指针。

html：

 <div> <h2 onmouseover = "changetab (this)"> 1 </h2> <h2 onmouseover = "changetab (นี่)"> 2 </h2> <h2 onmouseover = "changetab (นี้)"> 3 </h2>

JS：

 var tabs = document.getElementsByClassName ('tab-head') [0] .getElementsByTagname ('H2'), เนื้อหา = document.getElementsByClassName ('แท็บ-เนื้อหา') [0] .getElementSByTagname ('div'); {ถ้า (แท็บ [i] === แท็บ) {แท็บ [i] .className = 'เลือก'; เนื้อหา [i] .className = 'show';} else {แท็บ [i] .className = ''; เนื้อหา [i] .className = ';}}}}}}

这种方式稍微方便一些， 只要传递นี่指针， 不用按照顺序传递序号， 但这也不是最简便的方式。

最简便的一种：

第四种方式：

html：

 <div> <h2> 1 </h2> <h2> 2 </h2> <h2> 3 </h2> </div> <div> <div> เนื้อหา 1 </div> </div> เนื้อหา 2 </div> <div> เนื้อหา 3 </div> </div>

JS：

 tabs var = document.getElementsByClassName ('tab-head') [0] .getElementsByTagname ('H2'), เนื้อหา = document.getElementsByClassName ('แท็บ-เนื้อหา') [0] .getElementSByTagname ('div') {แท็บ [i] .onmouseover = showtab;}}) (); ฟังก์ชั่น showtab () {สำหรับ (var i = 0, len = tabs.length; i <len; i ++) {ถ้า (แท็บ [i] === สิ่งนี้) {tabs [i] {tabs [i] .className = ''; เนื้อหา [i] .className = '';}}}

这样 js、 html、 css 就完全分离了， 通过แท็บนี้指针就可以判断当前鼠标滑过的是哪一个

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