Question

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

请找小提琴：http://jsfiddle.net/0p7djjnc/7/。请建议javascript更改。谢谢。

HTML code：

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

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

也许你可以使用一些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 3

请参阅此处更新的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();
});

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

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

4 个答案:

UpdatedFiddle

请参阅此处更新的Fiddle