3.3.1-练习：tab栏切换

冷不防 2023-07-15 09:29 130阅读 0赞

jQuery实现简易的tab栏切换

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> * { margin: 0; padding: 0; } ul { list-style: none; } div { width: 600px; margin: 0 auto; } .nav li { width: 200px; height: 50px; background-color: antiquewhite; float: left; text-align: center; line-height: 50px; } ul .select { background-color: cadetblue; } .content li { width: 600px; height: 300px; background-color: #ccc; display: none; } .content .show { display: block; } </style>
    </head>
    
    <body>
        <div>
            <ul class="nav">
                <li class="select">标题一</li>
                <li>标题二</li>
                <li>标题三</li>
            </ul>
            <ul class="content">
                <li class="show">内容一：今天天气晴朗</li>
                <li>内容二：明天是个好天气</li>
                <li>内容三：后天可以休息啦</li>
            </ul>
        </div>
    
        <script src="jQuery.js"></script>
        <script> $(".nav li").click(function () { var i = $(this).index(); $(this).addClass('select').siblings().removeClass('select'); $('.content li').eq(i).show().siblings().hide(); }); </script>
    
    </body>
    
    </html>

效果图：

![在这里插入图片描述][20200316162917786.gif]

[20200316162917786.gif]: /images/20230528/a0c7d642ad624c69adcb944e64511f66.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JS 原生实现Tab栏的切换

最终实现效果图展示，通过点击tab栏，对内容进行切换。样式未进行美化。 ![70d78ee2147e4b6882303d762b1b6722.png][] 具体思路见代码注

素颜马尾好姑娘i/ 2023年10月10日 22:58/ 0 赞/ 24 阅读

相关 3.3.1-练习：tab栏切换

jQuery实现简易的tab栏切换 <!DOCTYPE html> <html lang="en"> <head> <met

冷不防/ 2023年07月15日 09:29/ 0 赞/ 131 阅读

相关 js实现tab栏切换

![在这里插入图片描述][20200304175315638.PNG] html+css <style> .tab2 { wid

拼搏现实的明天。/ 2023年07月11日 06:24/ 0 赞/ 45 阅读

相关 tab栏的简单切换

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

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

相关 jquery 基础+Tab栏切换案例

类操作在原生JS里面className会覆盖元素原来有的类名 jquery里面的类操作就不会这样,只对指定类进行操作,不影响原先的类名添加类名 add

Bertha 。/ 2023年07月08日 05:48/ 0 赞/ 48 阅读

相关 jQuery样式操作（Tab栏切换）

一、操作方法主要有两种方法：一种是操作css方法，另外一种是设置类样式。操作css方法 1. 参数只写属性名，则返回属性值 2. 参数是属性名，属性值，逗号隔

心已赠人/ 2023年07月03日 13:28/ 0 赞/ 46 阅读

相关 vue之tab栏切换总结

一、v-show控制内容切换用点击事件改变cur的值来控制tab样式和内容显示隐藏。数据渲染原理:利用v-for绑定的index来控制点击对应内容的下标 ![wa

青旅半醒/ 2023年06月24日 15:29/ 0 赞/ 21 阅读

相关 tab栏切换

tab栏切换 1、jquery方式首先引入 jquery.js 文件 <style type="text/css"> {

分手后的思念是犯贱/ 2022年12月28日 11:08/ 0 赞/ 220 阅读

相关 tab栏切换练习

![在这里插入图片描述][20200806104510340.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

绝地灬酷狼/ 2022年11月24日 12:56/ 0 赞/ 200 阅读

相关 jQuery实战_tab栏切换

jQuery实现tab栏切换 HTML结构： <ul> <li class="active">第一栏</li> <li>第二

朱雀/ 2022年05月22日 12:40/ 0 赞/ 339 阅读