jquery implements TAB switching code for opening a web page with animated effects for the first time

jquery implements TAB switching code for opening a web page with animated effects for the first time_jquery

WBOY

Release： 2016-05-16 15:40:35

Original

1345 people have browsed it

The example in this article describes how jquery implements the TAB switching code for opening a webpage with animated effects for the first time. Share it with everyone for your reference. The details are as follows:

This is a web page TAB code with animated effects when opening for the first time. The animation will only be displayed when the TAB menu is clicked for the first time, but will disappear when clicked again. A practical web page tab effect, if needed. Please download it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-first-open-flash-style-tab-cha-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>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style type="text/css">
body,h1,div,ul,li{ margin:0; padding:0;}
li{ list-style:none;}
.demo{ width:300px; margin:30px auto; position:relative;}
.demo li{ float:left; padding:0 15px; cursor:pointer; height:30px; line-height:30px;}
.d-bk{}
.demo li.cur{ background-color:#F00; color:#FFF;}
.demo li.cur .d-bk{ border:1px solid #F00; width:300px; height:150px; background-color:#f1f1f1; position:absolute; left:0; top:30px; color:#333;}
</style>
<script type="text/javascript">
 $(document).ready(function(){
  $(".demo li div").hide();
  $(".demo li").click(function(){
   $(this).addClass("cur").siblings().removeClass("cur");
   $("div.d-bk").slideDown()
   },function(){
   $("div.d-bk").slideUp() 
  })
 })
</script>
</head>
<body>
<ul class="demo">
 <li>
  导航1
 <div class="d-bk">111</div>
 </li>
 <li>
  导航2
 <div class="d-bk">222</div>
 </li>
 <li>
  导航3
 <div class="d-bk">333</div>
 </li>
</ul>
</body>
</html>

Copy after login

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