search

Home >Web Front-end >JS Tutorial >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

高洛峰
高洛峰Original
2017-02-08 16:51:401099browse

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>

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!


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Four ways to implement tab switching in javascriptNext article：Four ways to implement tab switching in javascript

Related articles

See more