下
本文实例为大家分享了js选项卡切换效果的具体实现代码，供大家参考，具体内容如<!DOCTYPE html> <html> <head>
<meta charset=\<title>朱朱制作</title>
<script src=\<style> *{
margin: 0; padding: 0; } body{
background-color: #fff; font-family: \微软雅黑\ font-size: 18px; width: 1000px; margin: 50px auto; color:#000000; }
.wrapper{
width: 350px; }
#nav ul{
border-bottom: 2px solid yellowgreen; height: 32px; }
#nav li{
display: inline-block; border: 2px solid #999; border-bottom: none; margin-left: 10px; width: 65px; text-align: center; line-height: 30px; }
#nav li:hover{
cursor: pointer; }
#content{
display: block;
border: 1px solid blue; border-top: none; text-align: center; height: 100px; line-height: 100px; }
#nav li.on{
border-bottom: solid 2px #ffffff; }
.hide{
display: none; }
.show{
display: block; } </style> </head>
<script type=\
/*window.onload=change; //js代码实现 function change(){
this.nav=document.getElementById(\ this.li=nav.getElementsByTagName(\
this.cont=document.getElementById(\ this.divi=cont.getElementsByTagName(\ for(var i=0;i<li.length;i++){ li[i].index=i;
li[i].onclick=function(){
for(var i=0;i<li.length;i++){ li[i].className=\
divi[i].className=\ }
li[this.index].className=\
divi[this.index].className=\ } } }*/
$(function(){
$('#nav li').each(function(){ $(this).click(function(){
$('#nav li').removeClass(\ $(this).addClass(\
$(\
$(\
div\ }) }) })
</script> <body>
<div class=\ <div id=\ <ul>
<li class=\ <li>num2</li> <li>num3</li> <li>num4</li> </ul>
</div><div id=\
<div class=\ <div class=\ <div class=\ <div class=\ </div> </div> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助。