0

我有一个这样的HTML代码

      <li>
            <ul>
               <li id="6"><input type="radio" name="sell" value="sell" id="sell" />Sell</li>
               <li id="7"><input type="radio" name="rent" value="rent" id="rent" />Rent</li>
       <li id="8"><input type="radio" name="donate" value="donate" id="donate" />Donate</li>
             </ul>


            <div id="selltab" style="display:none;">
       eeeeeeeee
    </div>
    <div id="renttab" style="display:none;">
       ffffffffff
    </div>
       <div id="donatetab" style="display:none;">
       ggggggggg
       </div>

 </li>

我只需要在单击相应的单选按钮时显示每个 div，否则它应该被隐藏。现在我已经编写了一个 javascript，但它不能正常工作。

     $(document).ready(function(){
    $("radio[@name='sell']").click(function(){

        if ($("radio[@name='sell']:checked").val() == 'sell')
            $("#selltab").css("display","block");

    });


});

这是为了测试在单击价值出售单选按钮时是否可以显示出售选项卡...但似乎在某些地方有一些错误...

4

2 回答 2

3

通过使用切换功能，您可以做到这一点。

$('#selltab').hide();
$('#renttab').hide();

$('input[name=sell]').click(function(){
   $('#selltab').toggle();
})
$('input[name=rent]').click(function(){
    $('#renttab').toggle();
})
于 2012-05-04T11:41:32.413 回答
2

我认为这就是你想要的：http: //jsfiddle.net/Wsg3q/

<form>
  <input type="radio" name="group" value="sell" id="sell" /> sell <br/>
  <input type="radio" name="group" value="rent" id="rent" /> rent <br/>
  <input type="radio" name="group" value="donate" id="donate" /> donate <br/>
</form>

<div id="selltab" >
   eeeeeeeee
</div>
<div id="renttab" >
   ffffffffff
</div>
<div id="donatetab" >
   ggggggggg
</div>

Javascript：

$('div').hide();

$("input[name=group]:radio").change(function() {
     $( '#' + $(this).attr('id') + 'tab' ).show();
    $('div:not(#' + $(this).attr('id') + 'tab)' ).hide();
});
​

​
于 2012-05-04T11:30:37.223 回答