单击时隐藏和显示 Div

Question

我有三个 div，当用户点击“1”时，应显示 ID 为 divOne12 的 div1，当用户点击 2 div2 with id divTwo12 should be displayed and div1 should be hidden, when user clicks 3 div3 with id divThree12 should be displayed and previous showed div 应该隐藏。同样，如果用户单击之前显示的 Div2，则应隐藏 div 并显示 ID 为 divTwo12 的 div2。

请找到 fiddle :http://jsfiddle.net/0p7djjnc/7/ 。请推荐 javascript changes.Thanks.

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>

隐藏 div 的 Css 代码：

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

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

Answer 1

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

Answer 2

在此处查看更新Fiddle

适用于动态 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>

JQUERY

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

只需将 show / hide 替换为您希望在单击 img 时显示或隐藏的内容。

Answer 3

也许你可以使用一些 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();
    });
});

UpdatedFiddle

Answer 4

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

单击时隐藏和显示 Div

hide and show Div on click

html

javascript

css

jquery

在此处查看更新Fiddle

UpdatedFiddle