tab切换选项卡

ゝ一纸荒年。 2022-02-02 00:45 406阅读 0赞

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style> * { padding: 0; margin: 0; } ul{ display: flex; text-align: center; } li { list-style: none; white-space: 20px; margin: 20px; } </style>
        <script> function tab(pid) { var tabs = ["tab1", "tab2", "tab3", "tab4"]; for (var i = 0; i < 4; i++) { if (tabs[i] == pid) { document.getElementById(tabs[i]).style.display = "block"; } else { document.getElementById(tabs[i]).style.display = "none"; } } } </script>
    </head>
    
    <body>
        <div id="tanContainer">
            <div id="tabNav">
                <ul>
                    <li onclick="tab('tab1')">标题一</li>
                    <li onclick="tab('tab2')">标题二</li>
                    <li onclick="tab('tab3')">标题三</li>
                    <li onclick="tab('tab4')">标题四</li>
                </ul>
            </div>
            <div id="tab">
                <div id="tab1">内容一</div>
                <div id="tab2">内容二</div>
                <div id="tab3">内容三</div>
                <div id="tab4">内容四</div>
            </div>
        </div>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]: /images/20220202/1fb96ed74cd440d3b3d0defa6d1fb4d8.png

发表评论取消回复

表情：

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

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

相关阅读

相关选项卡切换

一个选项卡，意思就是切换选项，一个最简单的列子，爱玩手机和电脑的肯定用过，选项卡和滚动条我觉得是差不多一个意思，当然只是差不多，并不绝对。因为两者都是屏幕高度不够，而设计出

ゞ浴缸里的玫瑰/ 2023年01月09日 03:51/ 0 赞/ 186 阅读

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

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

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

相关 html tab选项卡控件,tab选项卡插件

这是一款使用十分方便的、为移动设备定制的、可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件。在你要显示很多不同的内容时，tab选项卡导航方式是十分有用

阳光穿透心脏的1/2处/ 2022年10月06日 01:50/ 0 赞/ 258 阅读

相关 Axure实现Tab选项卡切换功能

这几天用Axure画原型图的过程中，需要实现Tab选项卡切换的效果，但Axure中并没有类似于Tab控件的部件，所以可以用Axure中的动态面板(Dyn

àì夳堔傛蜴生んèń/ 2022年08月13日 19:45/ 0 赞/ 261 阅读

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

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

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

相关 Tab切换选项卡

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tab切换选项卡

左手的ㄟ右手/ 2022年05月09日 06:58/ 0 赞/ 313 阅读

相关纯JS实现tab选项卡切换效果

今天学到的用js写选项卡，有高亮效果，废话不多说，直接上代码吧！！！注意事项：css代码中有一个隐藏其他div的属性， display: none;这个一定要注意，要不

秒速五厘米/ 2022年04月08日 13:53/ 0 赞/ 353 阅读

相关 tab切换选项卡

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c

ゝ一纸荒年。/ 2022年02月02日 00:45/ 0 赞/ 407 阅读

相关 tab选项卡

tab选项卡 tab选项卡 tab选项卡可以说是一个可以在一个·规定的位置中可以嵌套多个页面或小页面，也可以说是一本笔记本可以有很多张纸，那么多纸都封装在笔记本里面，可以

た入场券/ 2022年01月21日 09:47/ 0 赞/ 451 阅读

相关 tab页选项卡切换效果

效果图 ![20190625151915714.png][] html页面结构 <div class="tabbox" id="clicktab">

た入场券/ 2022年01月07日 06:43/ 0 赞/ 426 阅读