文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何在单击复选框上显示多个导航条选项卡水平

问如何在单击复选框上显示多个导航条选项卡水平
EN

Stack Overflow用户
提问于 2021-03-10 09:23:22
回答 1查看 76关注 0票数 0

如何在单击复选框上显示多个导航条选项卡水平

当我点击复选框，然后显示导航条时，当我点击取消复选框，然后显示它的隐藏时，我试图做到这一点。

在这里，在我的代码下面，我试图创建功能，它的工作很好。但它的显示和隐藏导航条垂直，但我想实现一条线(水平)。

但是，当我单击checkbox1和checkbox2，它的显示在水平的一行中时，我无法做到这一点。但这在我的代码中没有发生。

我的目标是单击checkbox1和checkbox2，然后在一行中显示navbar选项卡，同时单击复选框1和2，然后垂直显示。

我的预期结果看起来像https://ibb.co/D16nBNH

任何人都能帮我解决这个问题。

​

代码语言：javascript
运行
复制
function addDay(e) {
  document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
代码语言：javascript
运行
复制
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
  <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
  <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
  <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
  <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
  <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
  <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
  <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>

<div class="container">
  <div class="row mr-2 ml-0" style="display:none;" id="lundi">
  
    <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
     
    </div>
  </div>
  
  
  
  </div>
  
  
  <div class="row mr-2 ml-0" style="display:none;" id="mardi">
      <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
     
    </div>
  </div>
  
  </div>
  <div class="row mr-2 ml-0" style="display:none;" id="mercredi">Some content3</div>
  <div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
  <div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
  <div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
  <div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>

​

这在我的代码中没有发生，我们怎么能这样做呢？

任何帮助都是感激的

javascript
html
jquery
css
EN

Stack Overflow用户

回答已采纳

发布于 2021-03-10 09:32:49

您可以从.container更改为.container-2类，并将display:flex更改为它，以使所有导航选项卡位于水平线上。

​

代码语言：javascript
运行
复制
function addDay(e) {
  document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}
代码语言：javascript
运行
复制
.container-2{
display:flex}
代码语言：javascript
运行
复制
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
  <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />1
  <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />2
  <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />3
  <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />4
  <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />5
  <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />6
  <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />7
</div>

<div class="container-2">
  <div class="row mr-2 ml-0" style="display:none;" id="lundi">
  
    <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
     
    </div>
  </div>
  
  
  
  </div>
  
  
  <div class="row mr-2 ml-0" style="display:none;" id="mardi">
      <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
     
    </div>
  </div>
  
  </div>
  <div class="row mr-2 ml-0" style="display:none;" id="mercredi">Some content3</div>
  <div class="row mr-2 ml-0" style="display:none;" id="jeudi">Some content4</div>
  <div class="row mr-2 ml-0" style="display:none;" id="vendredi">Some content5</div>
  <div class="row mr-2 ml-0" style="display:none;" id="samedi">Some content6</div>
  <div class="row mr-2 ml-0" style="display:none;" id="dimanche">Some content6</div>
</div>

​

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66561771

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档