javascript实现tab切换特效

前端技术 2023/09/02 JavaScript

本文为大家分享了javascript实现tab切换特效的方法，具体的实现内容如下，先看一下效果图：

 

很简单的javascript实现tab切换特效

<!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>

这个实例只是为大家简单介绍了javascript实现tab切换特效，希望对大家的学习有所帮助。

本文地址：https://www.stayed.cn/item/5842

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案