3.3.1-练习：tab栏切换

冷不防 2023-07-15 09:29 97阅读 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 条评论，97人围观）

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

相关阅读

相关 3.3.1-练习：tab栏切换

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

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

相关 js实现tab栏切换

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

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

相关 tab栏的简单切换

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

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

相关利用js实现Tab栏的切换功能

在很多网页都有这一模块的开发,所以今天我也来做一下,这个模块很重要. 几乎在每个网站都可以看得到成果图展示![在这里插入图片描述][20200202152236944

我就是我/ 2023年07月03日 04:52/ 0 赞/ 116 阅读

相关 tab栏切换

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

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

相关 tab栏切换练习

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

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

相关 jQuery特效Tab切换栏选项卡demo

在建站过程中，有时候需要有效利用页面空间，需要将多个模块的链接、图片、视频等网站资源放在一个div中，实现点击或者滑动实现展示多个模块，多用在侧边栏展示网站最新更新、最热文章，

约定不等于承诺〃/ 2022年11月10日 14:19/ 0 赞/ 239 阅读

相关关于用原生js实现tab栏的切换：

今天并不是很忙，然后就复习了原生的js。如何用原生js实现tab栏的切换呢？请看下图：当鼠标在女装男装时，显示女装男装。 ![这里写图片描述当鼠标在女装男装时，显

清疚/ 2022年07月13日 02:41/ 0 赞/ 228 阅读

相关 jQuery实战_tab栏切换

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

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

相关 jquery+css实现Tab栏切换的代码实例

前几天面试碰到现场给写一个Tab栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。最终要实现的效果

谁践踏了优雅/ 2022年01月29日 00:31/ 0 赞/ 257 阅读