单击选项卡时隐藏 Div 选项卡答案

【问题标题】：Hide Div tab on clicking the tab单击选项卡时隐藏 Div 选项卡
【发布时间】：2016-10-24 04:51:39
【问题描述】：

我的html页面上有两个div标签（Div1，Div2），标签很少，我想在页面加载时隐藏div2标签，并通过隐藏div1标签在单击另一个标签时显示它.
谁能帮助我如何使用 DOM 或使用 javascript

function myFunction() {
  alert("helloworld");
  document.getElementById("div2").style.display = "none";
}

function myFunction1() {
  alert("helloworld");
  document.getElementById("div1").style.display = "none";
  document.getElementById("div2").style.visibility = "visible";

}


function myFunctionone() {
  alert("helloworld");
  document.getElementById("div1").style.display = "none";
  document.getElementById("div2").style.visibility = "visible";

}

div.round1 {
  border: 1px solid deepskyblue;
  border-radius: 4px;
  height: 170px;
  width: 30%;
  margin: auto;
}

.up {
  vertical-align: -145px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body onload="myFunction()">

  <div id="div1" class="round1">

    <table>
      <tr>
        <td>
          <img src="html5.gif" alt="Mountain1" style="width:128px;height:128px;">
          <br>If a browser cannot find an image, it will display the alternate text
        </td>

        <td>
          <img class="up" src="pic_mountain.jpg" style="width:138px;height:70px;"> </td>
      </tr>

    </table>
  </div>

  <div id="div2" class="round1">

    <table>
      <tr>
        <td>
          <img src="pic_mountain.jpg" alt="Mountain1" style="width:128px;height:128px;">
          <br>If a browser cannot find an image, it will display the alternate text
        </td>

        <td>
          <img class="up" src="html5.gif" style="width:138px;height:70px;"> </td>
      </tr>

    </table>
  </div>

  <br>
  <div align="left">
    <div class="container">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home" onclick="myFunctionone()">One</a></li>
        <li><a data-toggle="tab" href="#menu1" onclick="myFunction1()">Two</a></li>
        <li><a data-toggle="tab" href="#menu1">Functional</a></li>
        <li><a data-toggle="tab" href="#menu3">Three</a></li>
      </ul>

      <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
          <h3>One</h3>
          <p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text.</p>
        </div>
        <div id="menu1" class="tab-pane fade">
          <h3>Two</h3>
          <p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
        </div>
        <div id="menu2" class="tab-pane fade">
          <h3>Three</h3>
          <p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
        </div>
        <div id="menu3" class="tab-pane fade">
          <h3>Others</h3>
          <p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
        </div>
      </div>
    </div>
  </div>



</body>

</html>

【问题讨论】：

您是否只想显示其中任何一个？

标签： javascript html dom

【解决方案1】：

$(document).ready(function () {
      $('#div2').hide()
      $('.nav a').click(function () {
          $('#div2').show()
          $('#div1').hide()
      })
})

你是这个意思吗？

【讨论】：

据我了解，div2 在加载时应该是隐藏的，但是当用户点击选项卡时，div2 应该是可见的，而 div1 应该隐藏或者如何隐藏？

【解决方案2】：

首先制作

.div2{
   display:none;
}

所以它应该在页面加载时隐藏。

然后在标签上放一个data-target 属性，如下所示：

<div class="tab-pane fade" data-target="div2">

然后点击关注

$(".tab-pane").on("click",function(){
   var item = $(this).attr("data-target");
   if (item == "div2"){
       $(".div2").show()
       $(".div1").hide()
   }else{
       $(".div1").show()
       $(".div2").hide()
   }
}

【讨论】：

我在我的帖子中用 dom 更新了我的代码，但我没有找到运气。请求你帮助我

【解决方案3】：

请尝试

<script>
myFunction();


function myFunction() {
    document.getElementById("div2").style.display = "none";
}

function myFunction1() {
    document.getElementById("div1").style.display = "none";

}


function myFunctionone() {
    document.getElementById("div2").style.visibility = "visible"; 

}

</script>

【讨论】：

我可以隐藏 div 标签，但我无法使其可见
您必须调用该按钮的 myFunctionone() onclick 事件，在该按钮中单击要显示 div
一件事是，如果您使用 display 属性隐藏 div，那么您必须使用 display 属性来显示 div 而不是像 document.getElementById("div2").style.display = "block 这样的可见性属性";

【解决方案4】：

移除页面加载功能并为 div2 添加 display:none。

    //change jquery to toogle div
    function myFunction1() {
        $("#div2").show();
        $("#div1").hide();
    }

    function myFunctionone() {
        $("#div1").show();
        $("#div2").hide();
    }

【讨论】：

【解决方案5】：

我认为 display = "block" 会对你有所帮助。

document.getElementById("div2").style.display = "block";

【讨论】：

【解决方案6】：

在此处借助一些 css 和 JQuery 完成简单的 Tab 实现：

<div class="wrapper">
  <h1>Quick and Simple Tabs</h1>
  <p>A quick and easy method for tabs that supports multiple tab groups on one page.</p>
<ul class="tabs clearfix" data-tabgroup="first-tab-group">
  <li><a href="#tab1" class="active">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>
<section id="first-tab-group" class="tabgroup">
  <div id="tab1">
    <h2>Heading 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla deserunt consectetur ratione id tempore laborum laudantium facilis reprehenderit beatae dolores ipsum nesciunt alias iusto dicta eius itaque blanditiis modi velit.</p>
  </div>
  <div id="tab2">
    <h2>Heading 2</h2>
    <p>Adipisci autem obcaecati velit natus quos beatae explicabo at tempora minima voluptates deserunt eum consectetur reiciendis placeat dolorem repellat in nam asperiores impedit voluptas iure repellendus unde eveniet accusamus ex.</p>
  </div>
  <div id="tab3">
    <h2>Heading 3</h2>
    <p>Atque ratione soluta laboriosam illo inventore amet ipsum aliquam assumenda harum provident nam accusantium neque debitis obcaecati maxime officia saepe ad ducimus in quam libero vero quasi. Saepe sit nisi?</p>
  </div>
</section>
</div>

还有一些 JQuery：

$('.tabgroup > div').hide();
$('.tabgroup > div:first-of-type').show();
$('.tabs a').click(function(e){
  e.preventDefault();
    var $this = $(this),
        tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
        others = $this.closest('li').siblings().children('a'),
        target = $this.attr('href');
    others.removeClass('active');
    $this.addClass('active');
    $(tabgroup).children('div').hide();
    $(target).show();

})

为其添加一些样式：

$('.tabgroup > div').hide();
$('.tabgroup > div:first-of-type').show();
$('.tabs a').click(function(e){
  e.preventDefault();
    var $this = $(this),
        tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
        others = $this.closest('li').siblings().children('a'),
        target = $this.attr('href');
    others.removeClass('active');
    $this.addClass('active');
    $(tabgroup).children('div').hide();
    $(target).show();

})

你完成了:) 希望这会有所帮助。

【讨论】：

【解决方案7】：

检查以下代码：将'display:none' 添加到div2。并在菜单点击时切换它。

function myFunction1() {
  document.getElementById("div1").style.display = "";
  document.getElementById("div2").style.display = "none";

}


function myFunctionone() {
  document.getElementById("div1").style.display = "none";
  document.getElementById("div2").style.display = "";

}

<div id="div1" class="round1">

  <table>
    <tr>
      <td>
        <img src="html5.gif" alt="Mountain1" style="width:128px;height:128px;">
        <br>If a browser cannot find an image, it will display the alternate text
      </td>

      <td>
        <img class="up" src="pic_mountain.jpg" style="width:138px;height:70px;"> </td>
    </tr>

  </table>
</div>

<div id="div2" class="round1" style="display:none">

  <table>
    <tr>
      <td>
        <img src="pic_mountain.jpg" alt="Mountain1" style="width:128px;height:128px;">
        <br>If a browser cannot find an image, it will display the alternate text
      </td>

      <td>
        <img class="up" src="html5.gif" style="width:138px;height:70px;"> </td>
    </tr>

  </table>
</div>

【讨论】：