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
Introduction to Linux and the most commonly used commands (easy to learn, but can solve more than 95% of the problems)
Linux is currently the most widely used server op...
Detailed explanation of count(), group by, order by in MySQL
I recently encountered a problem when doing IM, a...
Native javascript+CSS to achieve the effect of carousel
This article uses javascript+CSS to implement the...
Linux confirms that the data disk has been uninstalled and a new custom image can be created
Custom Image FAQ How to view the data disk? You c...
A brief analysis of using coredump technology to trace the cause of process crashes in Linux
Recently, a problem occurred in the project. The ...
How to operate the check box in HTML page
Checkboxes are very common on web pages. Whether ...
MySQL Optimization Summary - Total Number of Query Entries
1. COUNT(*) and COUNT(COL) COUNT(*) usually perfo...
Detailed tutorial on using Docker to build Gitlab based on CentOS8 system
Table of contents 1. Install Docker 2. Install Gi...
Example method to view the IP address connected to MySQL
Specific method: First open the command prompt; T...
Share 20 excellent web form design cases
Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...
Brief analysis of the MySQL character set causing database recovery errors
Importing data with incorrect MySQL character set...
WeChat applet implements calculator function
This article shares the specific code for the WeC...
How to create a flame effect using CSS
The main text starts below. 123WORDPRESS.COM Down...
Native JavaScript to implement random roll call table
This article example shares the specific code of ...
Windows10 mysql 8.0.12 non-installation version configuration startup method
This article shares the specific steps for config...