先说一下最土的一种方法:
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 标签页切换的方式 (推荐), 希望对大家有所帮助, 如果大家有任何疑问请留言,, 小编会及时回复大家的, 在此也非常感谢大家对武林网网站的支持! 在此也非常感谢大家对武林网网站的支持!