danci/www.hanlinyuanonline.com/Application/Admin/View/Course/detail.html

<!-- 头部 -->
<include file="Public/top" />
<style>
.tab span{
     float:left;
     background:#fefefe;
     background:-moz-linear-gradient(top, #fefefe, #ededed);    
     background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));
     background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
     border:1px solid #ccc;
     padding:5px 0;
     width:100px;
     text-align:center;
     margin-left:-1px;
     position:relative;
     cursor:pointer;
}
.tab .active{
     border-bottom:none;
     background:#fff;
 }
 .ylcon{width:100%;min-width:320px;}
.tit{height:26px;line-height:26px;padding:0px 15px;position:relative;font-size:15px;color:#aaa;border-bottom:1px solid rgba(0, 0, 0, 0.15);}
 
.story{border-bottom:1px dashed #cecece;padding:0 15px 3px;position:relative;}
.story_t{font-size:1.2em;color:rgba(0,0,0,1);padding-top:5px;padding-bottom:2px;}
.story_m{color:rgba(110,110,110,1);line-height:21px;word-break:break-all;word-wrap:break-word;overflow:hidden;font-size:1.2em;padding:2px 0;}
.story_time{color:rgba(154,154,154,1);padding:2px 0;}
.story_hf{background:rgb(245,245,245);font-size:1.2em;border:1px solid rgba(204,204,204,0.2);border-radius:2px;color:rgba(110,110,110,1);padding:4px;margin-bottom:5px;}
.opbtn{position:absolute;top: 0;right: 0;}
</style>

</style>
<div class="wrapper row-offcanvas row-offcanvas-left">
	<!-- Left side column. contains the logo and sidebar -->
	<aside class="left-side sidebar-offcanvas">
		<!-- 左边 -->
		<include file="Public/left" />
	</aside>

	<!-- Right side column. Contains the navbar and content of the page -->
	<aside class="right-side">
		<!-- Content Header (Page header) -->
		<!-- bar -->
		<include file="Public/bar" />

		<!-- Main content -->
		<!-- 右侧 -->
		<div class="row">
			<div class="col-xs-12">
				<h4><{$info['course_name']}></h4>
			</div>
			<div class="col-xs-12">
				<div class="tab" id="tab">
					<span class="active">课程详情</span>
					<span>课程介绍</span>
					<span>课程评论</span>
				</div>
			</div>
			
			<div class="col-xs-12 tabpane">
				<div class="col-sm-12">
					<div class="row pad">
						<form name="form1" method="get">
							<div class="col-sm-10">
								<div class="btn-group">
									<input type="text" placeholder="请输入单词" name="keyword" value="<{$keyword}>" class="form-control input-sm">
								</div>
								<div class="btn-group">
									<input type="hidden" name="course_id" value="<{$courseId}>">
									<button class="btn btn-sm btn-primary" name="sub" type="submit">
										<i class="fa fa-search"></i>
									</button>
								</div>
							</div>
							<div class="col-sm-1">
								<div class="col-sm-1">
									<a href="/admin/words/edit?course_id=<{$courseId}>" class="btn btn-primary">新增单词</a>
								</div>
							</div>
							<div class="col-sm-1">
								<div class="col-sm-1">
									<a href="javascript:history.go(-1)" class="btn btn-primary">返回</a>
								</div>
							</div>
						</form>
					</div>
				</div>
				<div class="col-xs-6">
					<div class="box">
						<!-- /.box-header -->
						<div class="box-body table-responsive">
							<table class="table table-bordered table-striped">
								<thead>
									<tr>
										<th>序号</th>
										<th>单词</th>
										<th>中文释义</th>
										<th colspan="2">操作</th>
									</tr>
								</thead>
								<tbody>
									<volist name="list" id="val" mod='2'>
									<eq name='mod' value='0'>
									<tr>
										<td><{$i}></td>
										<td><a href="/admin/words/edit?course_id=<{$val['course_id']}>&words_id=<{$val['words_id']}>"><{$val['words_name']}></a></td>
										<td title="<{$val['words_text']}>"><{$val['words_text']|msubstr=0,20,'utf-8'}></td>
										<td>
											&nbsp;<a href="/admin/words/edit?course_id=<{$val['course_id']}>&words_id=<{$val['words_id']}>">编辑</a>
											&nbsp;<a href="/admin/words/del?course_id=<{$val['course_id']}>&words_id=<{$val['words_id']}>" onclick="return confirm('确定删除吗？')">删除</a>
										</td>
									</tr>
									</eq>
									</volist>
									<empty name="list">
									<tr>
										<td colspan="5" align="center">没有记录</td>
									</tr>
									</empty>
								</tbody>
							</table>

						</div>
						<!-- /.box-body -->
					</div>
				</div>
				<div class="col-xs-6">
					<div class="box">
						<!-- /.box-header -->
						<div class="box-body table-responsive">
							<table class="table table-bordered table-striped">
								<thead>
									<tr>
										<th>序号</th>
										<th>单词</th>
										<th>中文释义</th>
										<th colspan="2">操作</th>
									</tr>
								</thead>
								<tbody>
									<volist name="list" id="val" mod='2'>
									<eq name='mod' value='1'>
									<tr>
										<td><{$i}></td>
										<td><a href="/admin/words/edit?course_id=<{$val['course_id']}>&words_id=<{$val['words_id']}>"><{$val['words_name']}></a></td>
										<td title="<{$val['words_text']}>"><{$val['words_text']|msubstr=0,20,'utf-8'}></td>
										<td>
											&nbsp;<a href="/admin/words/edit?course_id=<{$val['course_id']}>&words_id=<{$val['words_id']}>">编辑</a>
											&nbsp;<a href="/admin/words/del?course_id=<{$val['course_id']}>&words_id=<{$val['words_id']}>" onclick="return confirm('确定删除吗？')">删除</a>
										</td>
									</tr>
									</eq>
									</volist>
									<empty name="list">
									<tr>
										<td colspan="5" align="center">没有记录</td>
									</tr>
									</empty>
								</tbody>
							</table>

						</div>
						<!-- /.box-body -->
					</div>
				</div>
			
				<div class="col-xs-12">
					<div class="box">
						<!-- /.box-body -->
						<{$page}>
					</div>
					<!-- /.box -->
				</div>
			</div>
			<div class="col-xs-12 tabpane" style="display:none;"><{$info['course_intro']}></div>
			<div class="col-xs-12 tabpane" style="display:none;">
				<div class="ylcon">
				
					<div id="messDivId" style="width:60%;">
						<volist name="reply" id="val">
						<div class="story">
						<div class="opbtn"></div>
						
						<p class="story_t"><div style="float:left;"><img src="<{$val['user_icon']}>" style="width:20px;"></div>&nbsp;<{$val['user_name']}><span style="float:right;background-color:">👍<{$val['praise']}></span></p>
						<p class="story_time" style="padding-left:20px;"><{$val['operate_dt']}></p>
						<p class="story_m" style="padding-left:20px;"><{$val['reply_content']}></p>
						<volist name="val.reply_list" id="val">
						<p class="story_hf" style="padding-left:20px;"><{$val['user_name']}><span style="float:right;"><{$val['operate_dt']}></span><br><{$val['reply_content']}></p>
						</volist>
						</div>
						</volist>
						
					</div>
				</div>
			</div>
		</div>
		<!-- 右侧 -->
		<!-- /.content -->
	</aside>
	<!-- /.right-side -->
</div>
<!-- ./wrapper -->
<script>
var span = document.querySelectorAll('#tab span'),       //css选择器
    div = document.querySelectorAll('.tabpane');

for(var i=0;i<span.length;i++){                   //循环span标签
    span[i].idx = i;                                    
//给span一个自定义的idx属性，将I赋值进去，因为下边的循环不能直接拿到这个循环的i
    span[i].onclick = function(){
        for(var j=0;j<div.length;j++){         //循环div标签
            div[j].style.display = 'none';    //每次点击都先隐藏掉div，并移除class
            span[j].classList.remove('active');
        }
        div[this.idx].style.display = 'block';           //给当前div显示出来
        this.classList.add('active');                      //增加class
    }
}
</script>
</body>
</html>