这篇文章主要介绍了基于 javascript 实现最简单的选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="gb2312" />
- <title>朱朱制作</title>
- <script src="js/jquery.js" type="text/javascript"></script>
- <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="text/javascript">
- /*window.onload=change; //js代码实现
- function change(){
- this.nav=document.getElementById("nav");
- this.li=nav.getElementsByTagName("li");
- this.cont=document.getElementById("content");
- this.divi=cont.getElementsByTagName("div");
- 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="hide";
- }
- li[this.index].className="on";
- divi[this.index].className="show";
- }
- }
- }*/
- $(function(){
- $('#nav li').each(function(){
- $(this).click(function(){
- $('#nav li').removeClass("on");
- $(this).addClass("on");
- $("#content div").removeClass();
- $("#content div").eq($(this).index()).addClass("show").siblings().addClass("hide");
- })
- })
- })
- </script>
- <body>
- <div class="wrapper">
- <div id="nav">
- <ul>
- <li class="on">num1</li>
- <li>num2</li>
- <li>num3</li>
- <li>num4</li>
- </ul>
- </div><div id="content">
- <div class="show">content1</div>
- <div class="hide">content2</div>
- <div class="hide">content3</div>
- <div class="hide">content4</div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0224/265731.html