先说一下最土的一种方法 ：
HTML :
<div> <h2 id = "tab1"onmouseover = "changetab1 ()"> 1 </h2> <h2 id = "tab2"onmouseover = "changetab2 ()"> 2 </h2> <h2 id = "tab3"onmouseover = "changetab3 ()"> 3 </h2> <div> <div = "c1"> div> id = "c2"> content2 </div> <div id = "c3"> content3 </div> </div>
CSS :
H2 {Border-Top : 단단한 옥수수 플라워 블루 1px; 경계-왼쪽 : 단단한 옥수수 플라워 블루 1px; 폭 : 50px; 높이 : 25px; 마진; 마진 : 0; float : 왼쪽; 텍스트-정렬 : 중심;}. 테두리 : 단단한 CornflowerBlue 1px; width : 152px : 100px;}. {배경색 : CornflowerBlue;}. Tab-Content .show {display : block;}JS :
var tab1 = document.getElementById ( 'tab1'), tab2 = document.getElementById ( 'tab2'), tab3 = docum {tab1.className = 'selected'; tab2.className = ''; tab3.className = ''; c1.className = 'show'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> </div> <div> <div> content2 </div> </div> </div> </div> </div> </h2> </h2>
JS ：
var tabs = document.getElementsByClassName ( 'tab-head') === index) {탭 [i] .className = 'selected'; 내용 [i] .className = 'show';} else {탭 [i] .className = ''; 내용 [I] .className = ''; }}}这样就只要写一个 함수 ，, 而且不需要 ID, 但是还是要按照顺序传递参数。
第三种方式和第二种基本一样 第三种方式和第二种基本一样, 只是参数传递的是이 指针。
HTML ：
<div> <h2 onmouseover = "changetab (this)"> 1 </h2> <h2 onmouseover = "changetab (this)"> 2 </h2> <h2 onmouseover = "changetab (this)"> 3 </h2> </div> <div> <div> content2 </div> </div> </div> </div> </div> </div> </h2> </h2>
JS ：
var tabs = document.getElementsByClassName ( 'tab-head') {if (탭 [i] === 탭) {탭 [i] .className = 'selected'; 내용 [i] .className = 'show';} else {탭 [i] .className = ''; 내용 [i] .className = ';}}}这种方式稍微方便一些, 只要传递이 指针 指针 指针, 不用按照顺序传递序号, 但这也不是最简便的方式。
最简便的一种 ：
第四种方式 ：
HTML ：
<div> <h2> 1 </h2> <h2> 2 </h2> <h2> 3 </h2> </div> <div> <div> content1 </div> <div> content2 </div> <div> content3 </div> </div>
JS ：
var tabs = document.getElementsByClassName ( 'tab-head') {탭 [i] .onmouseOver = showtab;}} (); function showtab () {for (var i = 0, len = tabs.length; i <len; i ++) {if (tabs [i] === this) {탭 [i] .className = 'selected'; {탭 [i] .className = ''; 내용 [i] .className = '';}}}这样 js 、 html 、 css 就完全分离了, 通过 this 指针就可以判断当前鼠标滑过的是哪一个 탭 了。
以上所述是小编给大家介绍的最简单纯 javaScript av 탭 标签页切换的方式 (推荐), 希望对大家有所帮助, 如果大家有任何疑问请留言, 小编会及时回复大家的, 小编会及时回复大家的, 在此也非常感谢大家对武林网网站的支持！