Question

我的html页面上有两个div标签（Div1，Div2），标签很少，我想在页面加载时隐藏div2标签，并通过隐藏{{单击其他标签显示它1}}标签。
任何人都可以通过使用DOM或使用 javascript

＆＃13;

div1

＆＃13;

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";

}

＆＃13;

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

＆＃13;

Answer 1

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

你是说这个吗？

Answer 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()
   }
}

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

Answer 4

删除页面加载功能并为div2添加display：none。

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

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

Answer 5

检查以下代码：将'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>

Answer 6

我认为display =“block”会对你有帮助。

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

Answer 7

在这里使用一些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();

})

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

点击标签{隐藏Div标签

7 个答案: