单击时隐藏并显示 Div

hide and show Div on click

本文关键字：显示 Div 隐藏 单击      更新时间：2023-09-26

>我有三个div，当用户点击"1"时，应该显示id为divOne12的div1，当用户点击2个id为divTwo12的div2时，应该显示div1，并且应该隐藏div1，当用户点击3div3时，id为divThree12，应该显示之前显示的div。同样，如果用户单击 Div2，则之前显示的div 应隐藏，并且应显示 id 为divTwo12 的div2。

请找到小提琴：http://jsfiddle.net/0p7djjnc/7/。请建议对 JavaScript 进行修改。谢谢。

网页代码：

  <table>
  <tr>
  <td>
  <table>
  <tr>
     <td>
     <div id="divOne12">
     <div> 
     <table border="1">
    <tr><th>Column1</th><th>Column2</th></tr>
    <tr> 
    <td> Col1- data1 
    </td>
    <td> Col2 - data1
    </td>
    </tr>
    <tr> 
    <td> col1 - data2 
      </td>
      <td> col2 - data2
      </td>
    </tr>
  <tr> 
    <td> col3 - data3 
      </td>
      <td> col3 - data3
      </td>
    </tr>   
  </table></div> </div><div id="divTwo12">Div 2</div>
      <div id="divThree12">Div 3</div>
      </td></tr>
    <tr>
    <td>
    <table width="170px" border="1">
        <tr>
        <td>
    Static Row
         </td>
            <td id="one12" class="navigateTest" onclick="navigate()"><b>1</b></td>
            <td id="two12" class="navigateTest" onclick="navigate()"><b>2</b></td>
            <td id="three12" class="navigateTest" onclick="navigate()"><b>3</b></td>
        </tr>
        </table>
       </td></tr>
       </table>
       </td></tr>
        </table>

用于隐藏div 的 css 代码：

#divTwo12{
  display: none;
}
#divThree12 {
  display: none;
}

--编辑--DIV ID在我的应用程序中是动态的，如何在javascript函数中检索动态div id，请提出建议。

也许你可以使用一些data属性：

<td id="one12" class="navigateTest" data-target="divOne12"><b>1</b></td>
<td id="two12" class="navigateTest" data-target="divTwo12"><b>2</b></td>
<td id="three12" class="navigateTest" data-target="divThree12"><b>3</b></td>
$(function () {
    $('.navigateTest').click(function () {
        var t = $(this).data('target');
        $('#'+t).show().siblings('div').hide();
    });
});

更新的小提琴

$(document).ready(function(){
  $('#divOne12').hide();
  $('#divTwo12').hide();
  $('#divThree12').hide();
  $('#div1').click(function(){
       $('#divOne12').show();
       $('#divTwo12').hide();
       $('#divThree12').hide(); 
  });
  $('#div2').click(function(){
       $('#divOne12').hide();
       $('#divTwo12').show();
       $('#divThree12').hide(); 
  });
  $('#div3').click(function(){
       $('#divOne12').hide();
       $('#divTwo12').hide();
       $('#divThree12').show(); 
  });
});

在此处查看更新的小提琴

适用于动态div

.HTML

<img id="img1" data-id="div1"/>
<img id="img2" data-id="div2"/>
<img id="img3" data-id="div3"/>
<img id="img4" data-id="div4"/>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

简讯

 $("#img1").on('click', function() {
   $("div").hide();
   $('#'+$(this).data('id')).show();
});

只需在单击img时将显示/隐藏替换为要显示或隐藏的内容即可。

HTML： 

<table>
  <tr>
  <td>
  <table>
  <tr>
     <td>
     <div id="divone12">
     <div> 
     <table border="1">
    <tr><th>Column1</th><th>Column2</th></tr>
    <tr> 
    <td> Col1- data1 
    </td>
    <td> Col2 - data1
    </td>
    </tr>
    <tr> 
    <td> col1 - data2 
      </td>
      <td> col2 - data2
      </td>
    </tr>
  <tr> 
    <td> col3 - data3 
      </td>
      <td> col3 - data3
      </td>
    </tr>   
  </table></div> </div><div id="divtwo12">Div 2</div>
      <div id="divthree12">Div 3</div>
      </td></tr>
    <tr>
    <td>
    <table width="170px" border="1">
        <tr>
        <td>
    Static Row
         </td>
            <td id="one12" class="navigateTest" onclick="navigate()"><b>1</b></td>
            <td id="two12" class="navigateTest" onclick="navigate()"><b>2</b></td>
            <td id="three12" class="navigateTest" onclick="navigate()"><b>3</b></td>
        </tr>
        </table>
       </td></tr>
       </table>
       </td></tr>
        </table>

JQUERY：

$(function(){ 
     $('.navigateTest').click(function(){
         $("div[id^='div']").hide();
         var id=$(this).attr('id');
         var divId='div'+id;
         $('#'+divId).show();
             });
    });

.CSS：

#divtwo12{
  display: none;
}
#divthree12 {
  display: none;
}
相关文章：