Скрыть вкладку Div при нажатии на вкладку

ProgramBox

Скрыть вкладку Div при нажатии на вкладку

Post author:admin
Запись опубликована:15 мая, 2023
Post category:Вопросы по программированию

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

У меня есть два тега div (Div1, Div2) на моей html-странице с несколькими вкладками, и я хотел бы скрыть 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>

Ответ №1:

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

Вы это имеете в виду?

Ответ №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()
   }
}

Ответ №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>

1. Я могу скрыть тег div, но я не могу сделать его видимым

2. вы должны вызвать myFunctionone() onclick событие той кнопки, при нажатии на которую вы хотите отобразить div

3. во-первых, если вы используете свойство display, чтобы скрыть div, тогда вам нужно использовать свойство display, чтобы показать свойство div not visibility, например document.getElementById(«div2»).style.display = «block»;

Ответ №4:

Удалить функцию загрузки страницы и добавить отображение: нет для div2.

     //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 здесь:

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