jquery implements TAB switching code for opening a web page with animated effects for the first time-JS Tutorial-php.cn

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

高洛峰

Release： 2017-02-08 16:51:40

Original

1021 people have browsed it

This article mainly introduces the TAB switching code of jquery when opening a webpage with animation effect for the first time. It involves the dynamic transformation implementation techniques of jquery controlling page element attributes through mouse click events. It has certain reference value. Friends who need it can refer to it.

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

This is a TAB code that has an animated web page when it is opened for the first time. The animation will only be displayed when the TAB menu is clicked for the first time, and will disappear when it is clicked again. It is a practical web page. Tab effect, please download it if you need it.

The screenshot of the running effect is as follows:

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

The online demonstration address is as follows:

http://www.php.cn/

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,p,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 p").hide();
  $(".demo li").click(function(){
   $(this).addClass("cur").siblings().removeClass("cur");
   $("p.d-bk").slideDown()
   },function(){
   $("p.d-bk").slideUp() 
  })
 })
</script>
</head>
<body>
<ul class="demo">
 <li>
  导航1
 <p class="d-bk">111</p>
 </li>
 <li>
  导航2
 <p class="d-bk">222</p>
 </li>
 <li>
  导航3
 <p class="d-bk">333</p>
 </li>
</ul>
</body>
</html>

Copy after login

For more jquery implementation of TAB switching code for opening a webpage with animated effects for the first time, please pay attention to the PHP Chinese website!