socialforge/app/views/games/show.html.erb

<div class="content clearfix" >
  <div class="alert alert-blue mr15 mt15 ml15" id="myshixun_tip">
    <button data-dismiss="alert" class="task-close fr" type="button" id="close_myshixun_tip">×</button>
    完成任务后，请点击“提交评测”按钮，若通过系统评测，将为你解锁下一关，祝你早日通关，加油!
  </div>
  <div class="content-row mr15">
    <div class="content-info col-width fl ">
      <div class="panel-header clearfix">
        <h3 class="fl">第1关：Python的初始化</h3>
        <div class="fr  mt5">
          <a href="#"><i class="fa fa-minus font-14 mr10 fl color-grey"></i></a>
          <a href="#"><i class="fa fa-minus-square font-14  fl color-grey"></i></a>
        </div>
      </div>
      <div class="tab_content clearfix" >
        <ul id="tab_nav">
          <li id="tab_nav_1" class="tab_hover " onclick="HoverLi(1);">
            <a href="javascript:void(0);" class="tab_type">过关任务</a>
          </li>
          <li id="tab_nav_2"  onclick="HoverLi(2);">
            <a href="javascript:void(0);" class="tab_type" >预备知识</a>
          </li>
          <li id="tab_nav_3"  onclick="HoverLi(3);">
            <a href="javascript:void(0);" class="tab_type" >参考答案</a>
          </li>
        </ul>
        <div class="cl"></div>
        <div id="tab_con_1" class="tab-info" >
          <p class="tab-info-inner">Python3 代码风格建议<br/>
            Python3 中使用注释<br/>
            认识 Python3 模块<br/>
            实验步骤<br/>
            1. 解释器<br/>
            Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
            首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>
            Python3 中使用注释<br/>
            认识 Python3 模块<br/>
            实验步骤<br/>
            1. 解释器<br/>
            Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
            首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>
            Python3 中使用注释<br/>
            认识 Python3 模块<br/>
            实验步骤<br/>
            1. 解释器<br/>
            Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
            首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>
            Python3 中使用注释<br/>
            认识 Python3 模块<br/>
            实验步骤<br/>
            1. 解释器<br/>
            Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
            首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>
            1. 解释器<br/>
            Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
            首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>
            Python3 中使用注释<br/>
            认识 Python3 模块<br/>
            实验步骤<br/>
            1. 解释器<br/>
            Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
            首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>

          </p>
        </div>
        <div id="tab_con_2" class="undis tab-info" >
          <p class="tab-info-inner">dfdf</p>
        </div>
        <div id="tab_con_3" class="undis tab-info" >
          <p class="tab-info-inner">dfdfdfdfdf</p>
        </div>
      </div>
    </div>
    <div id="code_content">
      <%= render :partial => 'repository' %>
    </div>
    <div id="code_results">
      <%= render :partial => 'exec_results' %>
    </div>
    <div id="code_outpus">
      <%= render :partial => 'code_outputs' %>
    </div>
    <div id="code_actions">
      <%= render :partial => 'code_actions' %>
    </div>
  </div>
</div>

<script type="text/javascript" language="javascript">
    //课程大纲tab
    function g(o){return document.getElementById(o);}
    function HoverLi(n){
        for(var i=1;i<=3;i++){
            g('tab_nav_'+i).className='tab_nomal';
            g('tab_con_'+i).className='undis';
        }
        g('tab_con_'+n).className='dis';
        g('tab_nav_'+n).className='tab_hover';
    }
    $("#close_myshixun_tip").click(function(){
        $("#myshixun_tip").hide();
    });
</script>