jq 实现简单tab切换

淡淡的烟草味﹌ 2023-03-12 09:02 170阅读 0赞

<!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>
    .navigation p {
    float: left;
    margin: 0px 20px;
    }
    
    .navigation {
    overflow: hidden;
    }
    
    .box+.box {
    display: none;
    }
    </style>
    </head>
    
    <body>
    
    <div class="navigation">
    <p class="a">哈哈1</p>
    <p class="a">哈哈2</p>
    <p class="a">哈哈3</p>
    </div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.js"></script>
    <script>
    $(function () {
    $(".navigation .a").each(function (i) {
    $(this).click(function () {
    $(".box").eq(i).show();
    $(".box").not($(".box").eq(i)).hide();
    $(".navigation .a").removeClass("checked");
    $(this).addClass("checked");
    })
    })
    })
    </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 tab栏的简单切换

tab栏的简单切换样式不是很好看，主要的是思路和逻辑上代码： <!DOCTYPE html> <html lang="en"> <

绝地灬酷狼/ 2023年07月08日 09:22/ 0 赞/ 43 阅读

相关 jq 实现简单tab切换

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淡淡的烟草味﹌/ 2023年03月12日 09:02/ 0 赞/ 171 阅读

相关 jq实现tab选项卡

<div class="tab"> <ul class="tab-title"> <li class="this">

心已赠人/ 2023年02月11日 07:27/ 0 赞/ 15 阅读

相关 jq实现tab转换 php,WordPress之超酷Tab切换代码

大家先看看壹品集(只在文章页侧边栏上有)的tab切换效果，是不是觉得还不错，其实这只是一个简单的jQuery Tab切换效果，虽然很简单，但是却很实用。如果大家对此感兴趣，可以

忘是亡心i/ 2023年01月13日 10:51/ 0 赞/ 137 阅读

相关纯CSS实现Tab切换以及 CSS+JS实现Tab切换

纯CSS实现Tab切换效果图思路代码 CSSJS实现Tab切换效果图

怼烎@/ 2022年09月24日 11:20/ 0 赞/ 293 阅读

相关 jquery 简单两步实现tab切换效果

<script language="javascript" type="text/javascript"> <!-- $(function()\{ $("a\[\_

我不是女神ヾ/ 2022年06月14日 12:10/ 0 赞/ 277 阅读

相关超级简单的tab切换

<!DOCTYPE html> <head> <meta charset="UTF-8"/> <title>tab切换</t

怼烎@/ 2022年05月29日 07:54/ 0 赞/ 205 阅读

相关 JQ实现——TAB选项卡切换登录界面

今天，分享一个简单实用的TAB选项卡切换登录界面。 ![这里写图片描述][70] ![这里写图片描述][70 1] 主页部分 <!DOCTYPE htm

柔光的暖阳◎/ 2022年05月23日 12:12/ 0 赞/ 399 阅读

相关 jQuery实现tab切换

$('tab-content li').click(function() { var i = $(this).index();//下标

野性酷女/ 2021年11月05日 06:10/ 0 赞/ 378 阅读

相关 JS实现的简单tab切换功能完整示例

本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <he

怼烎@/ 2021年11月02日 17:12/ 0 赞/ 301 阅读