tab列表自动切换-jquery-click

最新推荐文章于 2023-01-27 01:17:04 发布
原创 最新推荐文章于 2023-01-27 01:17:04 发布 · 191 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery

本文介绍如何使用jQuery实现tab选项卡在鼠标enter事件触发下的自动切换效果，提供了一种增强用户体验的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="list">
        <div class="btns">
            <a href="#">小说</a>
            <a href="#">非小说</a>
            <a href="#">少儿</a>
        </div>

        <ul>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
        </ul>

        <ul>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
        </ul>

        <ul>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
        </ul>
    </div>
    <script src="./jquery.js"></script>
    <script>
        // 初始化
        $('.btns a').eq(0).addClass('on');
        $('#list ul').eq(0).css('display', 'block');
        var num = 0;
        $('.btns a').click(function (e) {
            e.preventDefault();
            var index = $('.btns a').index(this)
            //清除所有格式  代替原生js的for循环
            $('.btns a').removeClass('on')
            $('#list ul').css('display', 'none')
            //index下的格式
            $(this).addClass('on');
            $('#list ul').eq(index).css('display', 'block')
            num = index
        });
        setInterval(function () {
            ++num;
            if (num > $('.btns a').length - 1) {
                num = 0
            }
            $('.btns a').removeClass('on')
            $('#list ul').css('display', 'none')
            $('.btns a').eq(num).addClass('on');
            $('#list ul').eq(num).css('display', 'block')
        }, 2400)
//++n/n++; 当是独立的表达式时，前++和后++效果一样
//当赋值或输出操作时，前++是先++运算后赋值， 后++是赋值后++运算
    </script>
</body>

</html>

mouseenter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="list">
        <div class="btns">
            <a href="#" class="on">小说</a>
            <a href="#">非小说</a>
            <a href="#">少儿</a>
        </div>

        <ul style="display: block;">
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
            <li><a href="#">时间旅行者的妻子</a></li>
        </ul>

        <ul>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
            <li><a href="">人生若只如初见</a></li>
        </ul>

        <ul>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
            <li><a href="">不一样的卡梅拉（..</a></li>
        </ul>
    </div>
    <script src="./jquery.js"></script>
    <script>
        $.each($('.btns a'), function (index,item) { 
             $(this).mouseenter(function () { 
                $('.btns a').removeClass('on')
                $('#list ul').css('display','none')

                
                $(this).addClass('on');
                $('#list ul').eq(index).css('display','block')
             });
        });
        
    </script>
</body>
</html>
l-Isabel
关注
JavaScript 实现滚动内容自动切换 Tab
Web分享
05-06 6277
原生 js 实现滚动内容自动切换 Tab
导航tab页--JQuery
03-05
JQuery是一个广泛使用的JavaScript库，它为实现动态和交互式的Tab页功能提供了便利。本文将深入探讨如何利用JQuery创建功能丰富的导航Tab页。 首先，理解Tab页的基本结构至关重要。一个典型的Tab页布局通常包括一个...
tab列表切换效果
08-14
用jQuery实现的简单tab标签切换效果，十分简单，每个人都能看懂。
JQuery实现列表切换
辉少的博客
12-04 1052
&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function(){ $("#before"
tab栏切换
weixin_43188011的博客
09-20 3785
tab栏切换 当鼠标点击上面相应的选项卡(tab)，下面内容也跟随变化。 【案例分析】 1：Tab栏切换与两个大的模块 2：上面的模块选项卡，点击某一个，当前这一个底色会变成红色，其他不变(排它思想) ，修改类名方式 3：下面的模块内容，会跟随上面的选项卡变化，所以下面模块变化写到点击事件里面。 4：规律：下面的模块显示内容和上面的选项卡一一对应，相匹配 5：核心思路：给上面的tab_list里面所以li添加自定义属性，属性值从0开始编号。 6：当我们点击tab_list里面的某个li,让tab_con里面
vue之tab栏切换
小多的博客
08-08 7289
一个简单的tab栏切换组件，由tabs以及tab-pane组成。
jQuery TAB文字列表自动切换特效代码
03-20
jQuery TAB文字列表自动切换特效代码是一种常见的网页设计技术，它利用JavaScript库jQuery实现页面上的内容分块显示。这种效果能够优化用户体验，使用户无需手动点击就能自动浏览多个内容板块，通常用于展示新闻、...
实现Tab文字列表自动切换的jQuery特效代码
### jQuery TAB文字列表自动切换特效代码知识点详细说明： #### 1. jQuery基础 - **选择器**：用于选取页面中的元素，例如`#id`、`.class`、`element`等。 - **事件**：如`click()`、`hover()`等事件方法，用于绑定...
Tab标签选项卡切换jQuery特效.zip
07-05
总的来说，"Tab标签选项卡切换jQuery特效.zip"提供了一种便捷的方式，帮助开发者快速实现富有吸引力的Tab切换效果，从而提升网页的互动性和用户满意度。通过深入理解jQuery和相关CSS、HTML知识，你可以轻松地定制和...
jQuery Tab标签自动左右切换特效代码
03-20
在实现Tab切换特效时，jQuery提供了方便的API和方法，如`.click()`（响应点击事件）、`.hide()`和`.show()`（隐藏和显示元素）以及`.addClass()`和`.removeClass()`（添加和移除CSS类）。 接下来，我们来看看实现这...
List 列表界面的完成和 Tab 键的页面切换实现
11-07 245
http://www.cnblogs.com/Highestop/archive/2012/11/07/2759617.html 首先先给出昨天做好的 QA 部分的列表页面截图： 这是初步设计出的 QAList 界面的效果，每个项目左边分别有访问量和已回答人数，单击数字或者问题的标题均可以链接到问题的显示界面； 今天上午根据组长的需求把 QA 部分，文章以及视频部分（这...
利用tab键实现页面切换
qq_38523616的博客
07-29 791
方案： 使用，每个tab页是一个pannel，然后wx.Notebook这个可以实现标签的效果，这个类有一个.AddPage方法，把每个pannel页加进去就可以了。 代码如下： #coding=utf-8 import wx class Page1(wx.Panel): def __init__(self,parent): wx.Panel.__init__(self, ...
简单好用的tab切换页面
走着学磔的专栏
03-17 890
闲来无事，总结下一个经常用到的tab切换的功能。 先上图： 这个是利用的RadioGroup和radiobutton实现点击切换tab功能，废话不说了，上代码吧！<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
uiapp tab栏切换时内容自动滚动到相对应的位置
weixin_48145150的博客
04-25 1722
业务需求 1，tab栏的项是动态的，可横向滚动， 2，点击tab栏时，内容自动滚到相对应的位置 3，滚动内容时，对应的内容要高亮对应的tab 视频展示 下面介绍代码（都带有注释就不一一介绍） <template> <scroll-view class="tab-scroll-sticky" id="tabs" scroll-y="true" @scroll="tabScoll" :scroll-top="scrollInto"> <view cl
jQuery实现tab栏切换
weixin_66081834的博客
08-04 2673
jQuery实现tab栏切换
Jquery实现点击事件的四种写法
热门推荐
大脑和心脏都要跳动的97
07-03 5万+
1. $(".tab").click(function () { })2. $(".tab").on("click",function () { })3. $(document).on("click", ".tab",function () { })4. 使用&lt;onclick=""&gt;触发函数以上四种方法在不同设备上的可行程度自测。3&gt;2&am
总结tab栏切换实现的方法，以及增加滚动实现tab栏切换的效果
HQ\(^o^)/的博客
11-25 3003
继昨天写了篇简单的tab栏切换，后来，我又想起，其实这个tab栏切换，可以换为两部分，第一部分就是上面的 鼠标的高亮效果，第二部分就是 在第一部分的基础上进行操作的，第二部分也算是写死不动的。
前端基础之tab栏切换
m0_53602804的博客
01-27 688
状态栏转换基础
jq实现tab点击功能
zhou_w_x的博客
05-14 536
css: .nav{ margin: 20px 0; display: flex; justify-content: space-around; } .nav>span{ padding: 10px 0; } .nav .act_nav{ border-bottom:1px solid #f97952;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值