代码之家  ›  专栏  ›  技术社区  ›  shin

使用jquery选择单选按钮时如何在div中滑动

  •  0
  • shin  · 技术社区  · 15 年前

    我计划用PHP输出以下html。现在,当我选择week时,我想滑入week div,选择day,day div等。

    我怎么能用jquery呢。

    <div id="main">
     <form>
    <div id="week_day_time">
    
    <input type="radio" name="week_day_time" value="week" />Week<br />
    <input type="radio" name="week_day_time" value="day" />Day<br />
    <input type="radio" name="week_day_time" value="time" />Time
    
    </div>
    <div id="week">
    more form for week.
    originally hidden by css. But it will open when you select a week radio button.
    more form for week
    </div>
    <div id="day">
    more form...
    originally hidden by css. But it will open when you select a day radio button.
    more form for day
    </div>
    <div id="time">
    more form...
    originally hidden by css. But it will open when you select a time radio button.
    more form for time
    </div>
    </form> 
    </div>
    
    2 回复  |  直到 15 年前
        1
  •  3
  •   Jacob Relkin    15 年前

    试试这个:

    var current = '';
    $('[name="week_day_time"]').change(function() {
        if(current.length) 
            $('#' + current).slideUp();
        current = $(this).val();
        $('#' + $(this).val()).slideDown();
    });
    

    Working Example

        2
  •  1
  •   netadictos    15 年前

    我或多或少会做以下工作: http://jsfiddle.net/dactivo/dhwZY/

    $('input[name="week_day_time"]').click(function() {
    
        $("#texts").children().slideUp();
        $('#' + $(this).val()).slideDown();
    
    });