使用JQ实现Tab选项卡的切换功能

于 2024-03-06 23:29:13 发布
阅读量458 收藏 4
点赞数 5
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56286359/article/details/136520735
版权

<style>

        ul,

        li,

        ol {

            padding: 0;

            margin: 0;

            list-style: none;

        }

        .menu {

            width: 1000px;

            height: 100px;

            margin: 50px;

        }

        .menu ul {

            display: flex;

            text-align: center;

        }

        .menu ul li {

            width: 150px;

        }

        .menu ul>li div {

            height: 50px;

            line-height: 50px;

            background-color: #BCBABA;

            cursor: pointer;

            border: 1px solid black;

        }

        .menu ul>li ol {

            width: 100%;

            display: none;

        }

        .menu ul>li ol li {

            height: 40px;

            line-height: 40px;

            border-bottom: 1px solid #BCBABA;

            border-left: 1px solid #BCBABA;

            border-right: 1px solid #BCBABA;

        }

        .menu ul>li ol li:hover {

            background-color: #EAEBF0;

        }

    </style>

<body>

    <div class="menu">

        <ul>

            <li>

                <div class="option">沙县</div>

                <ol>

                    <li>拌面</li>

                    <li>蒸饺</li>

                    <li>杂酱面</li>

                </ol>

            </li>

            <li>

                <div class="option">西北拉面</div>

                <ol>

                    <li>汤饺</li>

                    <li>孜然牛肉盖浇面</li>

                    <li>牛肉炒刀削面</li>

                </ol>

            </li>

            <li>

                <div class="option">潮汕猪杂</div>

                <ol>

                    <li>猪杂汤粉/面</li>

                    <li>廋肉汤粉/面</li>

                    <li>牛肉丸汤粉/面</li>

                </ol>

            </li>

            <li>

                <div class="option">广式早点</div>

                <ol>

                    <li>酥皮叉烧</li>

                    <li>虎皮凤爪</li>

                    <li>虾饺</li>

                </ol>

            </li>

        </ul>

    </div>

<!-- 此处链接需要根据自己下载JS库位置进行更改 -->

    <script src="../libs/jQuery/jQuerymin.js"></script>  

    <script>

        // 需求：

            // 当用户鼠标移入 “导航栏” 时，显示 “下拉菜单”；

            // 当用户鼠标离开 “导航栏” 时，隐藏 “下拉菜单”；

        // 为导航栏绑定鼠标移入事件

        $(".option").on("mouseenter", function () {

            // 找到当前点击这个标签后面的标签，并为其实现下拉显示效果

            $(this).next().stop().slideDown();  

        })

        // 为导航栏绑定鼠标离开事件

        $(".menu ul li").on("mouseleave", function () {

            // 找到当前点击这个标签中的ol标签，并为其实现上拉隐藏效果

            $(this).find("ol").stop().slideUp();

        })

    </script>

</body>

俩碗螺蛳粉
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQ 最少代码实现选项卡切换
04-26
NULL 博文链接：https://onestopweb.iteye.com/blog/2352787
jq选项卡
Junit的博客
04-09 421
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request...
jq tab选项卡切换
木槿之夏
12-01 1750
<script type="text/javascript"> $(function() { $('.div1 input').click(function() { $(this).addClass('selete').siblings().removeClass('selete'); $('.d
JQ选项卡切换
weixin_46019220的博客
09-08 668
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js "></script> </head> <style> .tab-menu ul { list-sty.
jQuery简单实现tab选项卡切换效果
10-22
本文示例利用了jQuery的选择器和DOM操作功能，实现了Tab选项卡切换效果。 2. **Tab选项卡概念** Tab选项卡是用户界面中常见的组件，它允许用户通过点击不同的标签（tab），在不同内容区域之间切换。这种设计减少...
jQuery实现Tab选项卡切换效果简单演示
10-23
在本文中，作者详细演示了如何使用jQuery实现Tab选项卡...总之，本文详细讲解了使用jQuery实现Tab选项卡切换效果的原理、步骤和注意事项，并提供了一个实用的插件代码示例，使其他开发者可以容易地理解和复现这一功能。
jquery实现tab选项卡切换效果（悬停、下方横线动画位移）
10-19
jQuery实现Tab选项卡切换效果，通常涉及以下几个关键知识点： 1. HTML结构设计：Tab选项卡通常由一组导航链接（或按钮）和对应的内容区域构成。在本示例中，导航项是通过`<span>`标签包裹的文本实现的，内容区域则...
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
10-23
在实现Tab选项卡和图片切换时，jQuery提供了一系列方便的方法和API。 1. 鼠标点击切换： 这种切换方式通常通过监听元素的`click`事件来实现。当用户点击某个选项卡时，隐藏当前显示的内容并显示被点击的选项卡对应...
jquery实现选项卡
09-01
在前一段学习原生js中学习了选项卡的实现方式，其核心是切换css样式，以实现视觉上的切换。在学习jquery中则有不同的方法，当然其思想也还是那个思想，只是有了封装好的更简单的方法。下面是菜鸟代码。
轻松实现jquery选项卡切换效果
11-27
很早之想就学习jquery的插件写法，一直拖到现在，今天趁着没什么工作忙，搜索些资料学习下，写了个比较简单的选项卡效果。 刚开始有看到一个很通俗易通的例子：alert对话框。 jquery.alertMsg.js /** * [description] * @param {[type]} $ [description] * @return {[type]} [description] */ (function($){ $.fn.alertMsg = function(options) { var defaults = { mouseEvent: 'clcik', msg:
js、jq实现tab选项卡切换
努力变好
08-02 2597
js、jq实现tab选项卡切换
jQuery tab选项卡--案例
qq_40596594的博客
10-10 273
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../node_modules/jquery/dist/jquery.min.js">&lt...
JQuery实现选项卡（ 附代码）
weixin_46726346的博客
08-14 2858
样式： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
一行代码实现jq选项卡切换
天下大师傅
06-15 4958
$('.queryNav li').click(function() {     $('.content').children().eq($(this).index()).show().siblings('.queryContent').hide(); });
JQ实现选项卡样式切换
IU
06-09 383
HTML <div> <ul> <li class="active"></li> <li></li> <li></li> <li></li> </ul> </div> JS $("li").click(function(){ $(this).toggleClass("active"); $(this).siblings().remo
jq实现一个简易的选项卡
dyx19971026的博客
10-25 146
以下写的方法不是最优质的的方法，就是为了练练手，希望大家不要介意，如有问题，还请多指教 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
jq实现tab选项卡切换
最新发布
03-31
以下是一个简单的例子，使用jq实现tab选项卡切换： HTML代码： ```html <div class="tab"> <ul class="tab-menu"> <li class="active">Tab1 <li>Tab2 <li>Tab3 <div class="tab-content"> <div class="tab...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值