问题：

JS代码显示选项卡内容不正确

赫连黎昕

2023-03-14

我正在建立一个基于JS的选项卡导航，但不知怎么选项卡内容没有正确显示。其思想是只显示活动状态的选项卡内容。

我只想让选项卡内容显示属于该选项卡的内容。

代码如下所示：

null

        function setupTabs () {
            document.querySelectorAll(`.tabs_button`).forEach(button => {
                    button.addEventListener('click', () => {
                        const sideBar = button.parentElement;
                        let tabsContainer;
                        tabsContainer = document.querySelector(`section`);
                        const tabNumber = button.dataset.forTab;
                        const tabToActivate =
                            tabsContainer.querySelector(`.tabs_content[data-tab='${tabNumber}']`);

                        sideBar.querySelectorAll('.tabs_button').forEach(button => {
                            button.classList.remove("tabs_button--active");
                        });

                        tabsContainer.querySelectorAll(`.tabs_content`).forEach(tab => {
                            tab.classList.remove("tab_content--active");
                        });

                        button.classList.add("tabs_button--active")
                        tabToActivate.classList.add("tabs_content--active")

                    });
                });
        }
        document.addEventListener('DOMContentLoaded', () => {
            setupTabs();
        });

        * {box-sizing: border-box}

        .wrapper{
            display: grid;
            grid-template-columns: 150px 1fr;
            border:1px solid #cccccc;
            padding: 15px;
            margin: 0 auto;
            grid-template-areas:
                'nav main '
                'nav main'
        }

        .tabs_sidebar {
            grid-area: nav;
            display: flex;
            flex-direction: column;
            background: #cccccc;
        }

        section {
            display: flex;
            flex-direction: row;
            flex-shrink: 0;
            min-height: 400px;
        }
        .tabs_content {
            grid-area: main;
            background: #f6e3e3;
            padding-left: 15px;
            font-size: 1rem;
            display: none;
        }

        .tabs_button {
            display: block;
            padding: 10px;
            background: #eeeeee;
            border: none;
            width: 100%;
            outline: none;
            cursor: pointer;
            font-size: 1rem;
        }
        .tabs_button:active {
            background: #dddddd;
        }
        .tabs_button:not(:last-of-type){
            border-bottom: 1px solid #cccccc;
        }
        .tabs_button--active {
            font-weight: bold;
            border-right: 3px solid #009879;
            background: #dddddd;
        }
        .tabs_content--active {
            display: block;
        }

    <div class="wrapper">
        <nav class="tabs_sidebar">
            <button class="tabs_button tabs_button--active" data-for-tab="1">Tab #1</button>
            <button class="tabs_button" data-for-tab="2">Tab #2</button>
            <button class="tabs_button" data-for-tab="3">Tab #3</button>
        </nav>

        <section id="main_con" class="tabs_content tabs_content--active">
            <div class="tabs_content tabs_content--active" data-tab="1">
            <h2>Tab #1</h2>
            <p>Lorem ipsum dolor sit amet,  </p>
             </div>

            <div class="tabs_content" data-tab="2">
            <h2>Tab #2</h2>
            <p>Nunc vel risus  </p>
            </div>

            <div class="tabs_content" data-tab="3">
            <h2>Tab #3</h2>
            <p>Lorem ipsum dolor </p>
            </div>
        </section>

    </div>

null

我找不到错误。非常感谢任何帮助。

预先默许

共有2个答案

闻昊英

2023-03-14

我修改了使用的类名，因为我被相似的名称弄糊涂了。我想这也许与你希望达到的目标是一致的？

null

function setupTabs() {

    const clickhandler=function(e){
        const tabsContainer = document.querySelector('section.tabs_content');
        const tabToActivate = tabsContainer.querySelector('[ data-tab="'+this.dataset.forTab+'" ]');



        this.parentNode.querySelectorAll('.tabs_button').forEach( button => {
            button.classList.remove('tabs_button--active');
        });

        tabsContainer.querySelectorAll('div').forEach( tab => {
            tab.classList.remove('active');
        });

        this.classList.add('tabs_button--active')
        tabToActivate.classList.add('active')   
    };

    
    
    document.querySelectorAll( '.tabs_button' ).forEach( button => {
        button.addEventListener('click',clickhandler);
    });
}
document.addEventListener('DOMContentLoaded',setupTabs);

* {box-sizing: border-box}

.wrapper{
    display: grid;
    grid-template-columns: 150px 1fr;
    border:1px solid #cccccc;
    padding: 15px;
    margin: 0 auto;
    grid-template-areas:
        'nav main '
        'nav main'
}

.tabs_sidebar {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    background: #cccccc;
}

section {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    min-height: 400px;
}

.tabs_content {
    grid-area: main;
    background: #f6e3e3;
    padding-left: 15px;
    font-size: 1rem;
    display: block;
}

.tabs_button {
    display: block;
    padding: 10px;
    background: #eeeeee;
    border: none;
    width: 100%;
    outline: none;
    cursor: pointer;
    font-size: 1rem;
}
.tabs_button:active {
    background: #dddddd;
}
.tabs_button:not(:last-of-type){
    border-bottom: 1px solid #cccccc;
}
.tabs_button--active {
    font-weight: bold;
    border-right: 3px solid #009879;
    background: #dddddd;
}




.tabs_content > div{display:none;}
.tabs_content > .active{display:block;}

html prettyprint-override"><div class='wrapper'>
  <nav class='tabs_sidebar'>
    <button class='tabs_button tabs_button--active' data-for-tab='1'>Tab #1</button>
    <button class='tabs_button' data-for-tab='2'>Tab #2</button>
    <button class='tabs_button' data-for-tab='3'>Tab #3</button>
  </nav>

  <section id='main_con' class='tabs_content'>
  
    <div class='active' data-tab='1'>
      <h2>Tab #1</h2>
      <p>Content Tab1</p>
    </div>

    <div data-tab='2'>
      <h2>Tab #2</h2>
      <p>Content Tab2 </p>
    </div>

    <div data-tab='3'>
      <h2>Tab #3</h2>
      <p>content Tab3 </p>
    </div>
    
  </section>
</div>

东门俊民

2023-03-14

请注意你有一个错别字。

您可以修改此行：

tab.classList.remove("tab_content--active");

对此：

tab.classList.remove("tabs_content--active");

并且它将按照预期工作,为单击的按钮及其相应的数据选项卡切换xxxx-active类。

类似资料：

选项卡内的面板未显示

我正在尝试有一个使用IntelliJ GUI表单的UI。我创建了一个扩展JFrame的类，它只包含带有两个选项卡的JTabbedPane，每个选项卡都有一个JPanel。然后是扩展JPanel的2个其他类。但是，发射时没有面板显示。我已经尝试使面板失效，重新涂漆和重新验证
Visual Studio代码选项卡键不插入选项卡
primefaces选项卡使用动态选项卡查看不同的选项卡内容

我对tabView有问题。第一个选项卡应始终显示相同的内容（称为搜索模板，用#{not curSearch.isClosable（）}标识）。所有其他选项卡都是搜索实例（用#{curSearch.isClosable（）}标识）代码如下：不幸的是，在第一个选项卡上有一些被称为curSearch对象的方法，这些方法仅在第二个选项卡和后面的选项卡上使用。如果我不使用ui:insert，它不会改变任
jquery.idTabs 选项卡使用示例代码

本文向大家介绍jquery.idTabs 选项卡使用示例代码，包括了jquery.idTabs 选项卡使用示例代码的使用技巧和注意事项，需要的朋友参考一下 idTabs是基于Jquery编写封装的一个插件，主要用于实现选项卡功能,它操作简单,只需到官网:http://www.sunsean.com/idTabs/下载插件JS脚本文件,并引用到网站中即可页面HTML布局及调用如下: 按照官网提示,
ActionBar选项卡内容重叠

问题内容：我在StackOverflow中发现了大量这些消息。像其他许多人一样，切换标签时，标签内容重叠也存在相同的问题。我发现的任何建议都无法解决我的问题。当我的应用启动时，它会正确显示第一个选项卡的内容。当我单击另一个选项卡时，旧内容保留在屏幕上，另一个选项卡的内容也添加在屏幕上。第二次切换选项卡时，所有内容均消失。切换标签不再有用。我在这里关注了Google的Developer文档。
Chrome在网络选项卡中不显示选项请求

我的web客户端应用程序正在通过FetchAPI设置HTTP POST请求。我看到选项飞行前请求是通过调试代理（Charles proxy）发送的，但它们不会显示在Google Chrome Developer Tools\Network选项卡中。我没有在“网络”选项卡上设置任何过滤器。我记得选项请求在那里是可见的，但不再是了。我怎么把它们带回来？

JS代码显示选项卡内容不正确

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档