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

Question

I have two div tags(Div1,Div2) on my html page with few tabs, And I would like to hide the div2 tag on page load, And display it on clicking the other tab by hiding div1 tag. 我的html页面上有两个带有很少标签的div标签（Div1，Div2），并且我想在页面加载时隐藏div2标签，并通过隐藏div1标签在单击另一个标签时显示它。
Can any one help me how can I do this by using DOM or by using javascript 谁能帮我使用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>

Answer 1

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

Do you mean this? 你是这个意思吗

Answer 2

first of all make the 首先使

.div2{
   display:none;
}

so it should be hidden on page load. 因此应在页面加载时将其隐藏。

then on the tabs put a data-target attribute like follow: 然后在标签上放一个data-target属性，如下所示：

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

then on click do follow 然后点击执行

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

Answer 3

please try 请试试

<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>

Answer 4

Remove on page load function and add display:none for div2. 删除页面加载功能，并为div2添加display：none。

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

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

Answer 5

Check the below code: Added 'display:none' to div2 . 检查以下代码：在div2添加了'display:none' 。 and Toggle it on menu click. 并在菜单上单击切换它。

 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>

Answer 6

我认为display =“ block”将为您提供帮助。

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

Answer 7

Complete and Simple Tab implementation with help of some css and JQuery here: 在此处通过一些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>

And some piece of JQuery: 还有一些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();

})

Add some styles to it: 添加一些样式：

$('.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();

})

And you done:) hope this helps. 您已完成：)希望能有所帮助。

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

问题描述

7 个解决方案

解决方案1
1 2016-10-24 05:00:48

解决方案2
0 2016-10-24 05:09:34

解决方案3
0 2016-10-24 05:22:30

解决方案4
0 2016-10-24 06:14:06

解决方案5
0 2016-10-24 06:21:55

解决方案6
0 2016-10-24 06:23:26

解决方案7
0 2016-10-24 06:34:10

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

问题描述

7 个解决方案

解决方案1 1 2016-10-24 05:00:48

解决方案2 0 2016-10-24 05:09:34

解决方案3 0 2016-10-24 05:22:30

解决方案4 0 2016-10-24 06:14:06

解决方案5 0 2016-10-24 06:21:55

解决方案6 0 2016-10-24 06:23:26

解决方案7 0 2016-10-24 06:34:10

解决方案1
1 2016-10-24 05:00:48

解决方案2
0 2016-10-24 05:09:34

解决方案3
0 2016-10-24 05:22:30

解决方案4
0 2016-10-24 06:14:06

解决方案5
0 2016-10-24 06:21:55

解决方案6
0 2016-10-24 06:23:26

解决方案7
0 2016-10-24 06:34:10