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.
2. The first requirement causes the slider width to be unfixed
3. In order to make the interaction better, the slider needs to add transition animation

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:

6 Tab tab plugins based on JQuery
jQuery EasyUI API Chinese Documentation - Tabs
Simple implementation of jQuery tabs
jQuery implements a simple demonstration of tab switching effect
jQuery Tools Tabs
JQuery Tab tab effect code improved version
Summary of jQuery EasyUI Tab Problems
jQuery implements tab functionality (two methods)
Summary of Tab sliding tabs and image switching (multiple effects) implemented by jQuery
jQuery implements TAB tab switching special effects simple demonstration

<<: How to connect to Alibaba Cloud Ubuntu 16.04 server from local Windows remote desktop

>>: How to use the Linux basename command

jQuery implements sliding tab

Demand Analysis:

Solution to ElementUI's this.$notify.close() call not working

MySQL 8.0 Window Function Introduction and Summary

A brief analysis of MySQL locks and transactions

Use href in html to pop up a file download dialog box when clicking a link

How to deploy MySQL master and slave in Docker

Vue implements simple data two-way binding

Two ways to implement HTML to randomly drag content positions

The contents of the table in HTML are displayed horizontally and vertically in the center

Specific steps to use vant framework in WeChat applet

Detailed explanation of Javascript closures and applications

Recommend

How to view and terminate running background programs in Linux

mysql5.6.8 source code installation process

A brief discussion on JavaScript scope

Perfect solution to the problem that MySQL cannot connect to the database through localhost

Detailed explanation of the use of MySQL group links

Introduction to using data URI scheme to embed images in web pages

A brief discussion on how to write beautiful conditional expressions in JS

Tutorial on deploying springboot package in linux environment using docker

How to achieve the maximum number of connections in mysql

The scroll bar position is retained when scrolling the vant list component

Detailed explanation of the principle of distributed locks and three implementation methods

css3 flex layout justify-content:space-between the last line is aligned to the left

Docker configuration Alibaba Cloud Container Service operation

mysql replace part of the field content and mysql replace function replace()

How to find out uncommitted transaction information in MySQL