jQuery implements sliding tab
|
This article example shares the specific code of jQuery to implement sliding tabs for your reference. The specific content is as follows First the final effect:
Demand Analysis: 1. The number of tab menus is not fixed, and the menu content is not fixed, resulting in unknown widths of individual menus and the overall width. The need for a slider means that the HTML structure of the slider and menu must be separated, and the jQuery offset method is used to get and set the position, and all divs use relative positioning. The TAB tab in this case can be easily expanded and reused. You only need to modify a few values to use it directly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0908</title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<style>
/*The container is just for horizontal centering, if not needed, you can remove this layer of nesting*/
.container{
left: 50%;
margin-top: 100px;
float: left;
cursor:pointer;
position: relative;
}
.BG{
right: 50%;
font-size: 0;
background-color: #f2f2f2;
border-radius: 30px;
position: relative;
}
.container div{
font-size: 16px;
line-height: 60px;
}
.list{
float: left;
display: inline-block;
padding: 0 50px;
transition: color 0.5s;
position: relative;
z-index: 1;
}
/*The order of listH and listA cannot be changed here, there is a priority, when listA is used, listH does not work*/
.listH{
color: #ff8300;
}
.listA{
color: #fff;
}
/*slider*/
#active{
width: 100px;
height: 60px;
border-radius: 30px;
background-color: #ff8300;
box-shadow: 0 5px 16px 0 rgba(255, 144, 0, 0.58);
position: relative;
z-index: 0;
transition: left 0.5s, width 1s;
}
</style>
<script>
$(document).ready(function () {
/*Set the default active tab eq(i)*/
var aL = $(".list:eq(1)");
$("#active").width(aL.innerWidth());
$("#active").offset(aL.offset());
aL.addClass("listA");
/*Add click events to each button*/
$(".list").click(function() {
$("#active").width($(this).innerWidth()); //Set width$("#active").offset($(this).offset()); //Set position$(this).addClass("listA");
$(".list").not(this).removeClass("listA");
});
/*hover effect*/
$(".list").hover(function () {
$(this).addClass("listH")
},function () {
$(this).removeClass("listH")
})
});
</script>
</head>
<body>
<div class="container">
<div class="BG">
<div class="list">one</div>
<div class="list">twotwo</div>
<div class="list">threethreethree</div>
<div class="list">four</div>
<div class="list">fivefivefive</div>
<div id="active"></div>
</div>
</div>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to connect to Alibaba Cloud Ubuntu 16.04 server from local Windows remote desktop
>>: How to use the Linux basename command
Recommend
Detailed explanation of the order of Mysql query results according to the order of ID in in()
Detailed explanation of the order of Mysql query ...
JS implements jQuery's append function
Table of contents Show Me The Code Test the effec...
Native JS to achieve special effects message box
This article shares with you a special effect mes...
MySQL 5.7.17 winx64 decompression version installation and configuration method graphic tutorial
This article shares the installation and configur...
Detailed explanation of Vue identity authentication management and tenant management
Table of contents Overview Button-level permissio...
How to deploy SSL certificate in windows apache environment to make the website support https
I won’t talk about the use of SSL certificates. F...
Summary of four situations of joint query between two tables in Mysql
Generally speaking, in order to get more complete...
Docker primary network port mapping configuration
Port Mapping Before the Docker container is start...
Detailed explanation of compiling and installing MySQL 5.6 on CentOS and installing multiple MySQL instances
--1. Create a new group and user for mysql # user...
Detailed description of component-based front-end development process
Background <br />Students who work on the fr...
Detailed introduction of Chrome developer tools-timeline
1. Overview Users expect the web applications the...
Detailed explanation of the use of MySQL Online DDL
Table of contents text LOCK parameter ALGORITHM p...
CSS example code for setting scroll bar style
The CSS implementation code for setting the scrol...
MySQL 8.0.15 version installation tutorial connect to Navicat.list
The pitfalls 1. Many tutorials on the Internet wr...
Detailed explanation of Mencached cache configuration based on Nginx
Introduction Memcached is a distributed caching s...