Cet article explique avec vous comment implémenter les effets de changement d'onglet en JavaScript. Le contenu spécifique de l'implémentation est le suivant. Jetons d'abord un coup d'œil aux rendus :
.
![](http://files.jb51.net/file_images/article/201511/2015111284706892.png?2015101284722)
Un javascript très simple pour implémenter des effets de changement d'onglet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!DOCTYPE html>
<html>
<head lang= "en" >
<meta charset= "UTF-8" >
<title>Tab</title>
<script src= "js/jquery-1.11.1.js" ></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 184px;
height: 100px;
border: 1px solid gray;
display: none;
}
.tab{
list-style: none;
width: 200px;
overflow: hidden;
}
.tab li{
float: left;
width: 60px;
border: 1px solid red;
height: 30px;
line-height: 30px;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
.on{
display: block;
}
.cur{
background: red;
color: #fff;
}
</style>
<script>
$( function (){
$( '.tab li' ).hover( function (){
$(this).addClass( 'cur' ).siblings().removeClass( 'cur' );
$( "div" ).eq($(this).index()).addClass( "on" ).siblings().removeClass( 'on' );
})
})
</script>
</head>
<body>
<ul class = "tab" >
<li class = "cur" >最新</li>
<li>热门</li>
<li>新闻</li>
</ul>
<div class = "on" >11</div>
<div>22</div>
<div>33</div>
<br/>
<input type= "text" value= "你好请输入密码" onfocus= "if(this.value=='你好请输入密码'){value=''}" onblur= "if(this.value==''){value='你好请输入密码'}" >
</body>
</html>
|
Copier après la connexion
Cet exemple n'est qu'une brève introduction à JavaScript pour implémenter des effets de changement d'onglet. J'espère qu'il sera utile pour votre apprentissage.