socialforge/app/views/contests/settings.html.erb

<div class="sy_class_r fr mb10 ml10">
  <h3 class="game-setting-h3 "><span class="ml15"></span>竞赛配置</h3>
  <div class="game-setting-tab">
    <ul id="game-setting-tab-nav">
      <li id="game-setting-tab-nav-1" class="game-setting-nav-hover" onclick="HoverLi(1);">
        <a href="javascript:void(0);">基本信息</a>
      </li>
      <li id="game-setting-tab-nav-2" onclick="HoverLi(2);">
        <a href="javascript:void(0);">成员</a>
      </li>
      <li id="game-setting-tab-nav-3" onclick="HoverLi(3);">
        <a href="javascript:void(0);">讨论区设置</a>
      </li>
      <div class="cl"></div>
    </ul>
    <div id="game-setting-content-1">
      <%= render :partial => "contests/edit" %>
    </div><!--issues_list_content_1 end-->

    <div id="game-setting-content-2" class="undis">
      <%= render :partial => "contests/members" %>
    </div><!--issues_list_content_2 end-->
    <div id="game-setting-content-3" class="undis">
      <%= render :partial => "contests/boards" %>
    </div><!--issues_list_content_3 end-->
  </div><!--issues_con_list end-->


</div><!--sy_class_r end-->


<script type="text/javascript">
    $(function(){
        <% if @select_tab == 'member'%>
        $("#game-setting-tab-nav-2").click();
        <% elsif @select_tab == 'boards'%>
        $("#game-setting-tab-nav-3").click();
        <% end %>
    });
    function g(o){
        return document.getElementById(o);
    }
    function HoverLi(n){
//如果有N个标签,就将i<=N;
        for(var i=1;i<=3;i++){
            g('game-setting-tab-nav-'+i).className='game-setting-nav-nomall';
            g('game-setting-content-'+i).className='undis';
        }
        g('game-setting-content-'+n).className='game-dis';
        g('game-setting-tab-nav-'+n).className='game-setting-nav-hover';
    }

//    $(document).ready(function() {
//        // Store variables
//        var accordion_head = $('.accordion > li > a'),
//                accordion_body = $('.accordion li > .sub-menu');
//
//        // Click function
//        accordion_head.on('click', function(event) {
//            // Disable header links
//            event.preventDefault();
//            // Show and hide the tabs on click
//            if ($(this).attr('class') != 'active'){
//                accordion_body.slideUp('normal');
//                $(this).next().stop(true,true).slideToggle('normal');
//                accordion_head.removeClass('active');
//                $(this).addClass('active');
//            }
//        });
//    });
</script>