jquery implements simple TAB menu effect without beautification

jquery implements simple TAB menu effect without beautification_jquery

WBOY

Release： 2016-05-16 15:41:48

Original

1326 people have browsed it

The example in this article describes how jquery implements a simple TAB menu effect without beautification. Share it with everyone for your reference. The details are as follows:

This is a simple TAB tab that looks unbeautified. The triggering actions are all complete. If you are interested, you can beautify it yourself. The beautification is pretty good. The code is concise and it is a good reference for learning. Used jQuery plug-in.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-show-tab-plug-style-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>未经美化的简洁TAB</title>
<style>
body {font:normal 12px/20px simsun; margin:0 auto; padding:0;} 
* {margin: 0px; padding: 0px;}
h4{font-size:14px;}
h5{font-size:12px;}
img {border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{text-decoration:underline; color:#ffae00;}
#tab{width:240px; margin:0 auto; text-align:center;}
.menu{height:35px; line-height:32px; padding-top:1px;}
.menu a{display:inline-block; height:35px; line-height:35px; width:116px; text-align:center; font-size:20px; color:#999999; font-weight:bold;}
.menu a:hover, .menu a.on{color:#d33b55; text-decoration:none;}
.cnt{border:1px solid #999999; width:240px; height:100px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $(".menu a").each(function(i){
  $(this).click(function(){
   $(".menu a").removeClass("on").eq(i).addClass("on");
   $(".cnt").hide().eq(i).show();
   return false; //防止a跳转；
  })
 })
 });
</script>
</head>
<body>
<div id="tab">
 <div class="menu">
 <a href="#" class="on">ASP源码</a>
 <a href="#">Java源码</a>
 </div>
 <div class="cnt">
 <ul>
 <li>ASP源码1</li>
 <li>ASP源码2</li>
 <li>ASP源码3</li>
 </ul>
 </div>
 <div class="cnt" style="display:none;">
 <ul>
 <li>Java源码1</li>
 <li>Java源码2</li>
 <li>Java源码3</li>
 </ul>
 </div>
 </div>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s jquery programming design.