zuiui-如何在jsp中引入导航栏

本文参考：http://zui.sexy/#component/nav

首先在文件头引入zuiui的声明：

<%@ include file="/WEB-INF/views/shared/zui-ref.jsp"%>

在HTML部分写入：

<ul class="nav nav-tabs" style="margin-bottom:20px;" >
<li class="active" id="tab1" οnclick="tabclick(1)"><a>水源视频</a></li>
<li id="tab2" οnclick="tabclick(2)"><a>水源图片 </a></li>
<li id="tab3" οnclick="tabclick(3)"><a>方位图 </a></li>
<li id="tab4" οnclick="tabclick(4)"><a>毗邻关系 </a></li>

</ul>

加入四个与tab栏对应的div

<div class="form-group" style="display:block; height:76;" id="div1"
name="divgroup">
<img id="vedios" οnerrοr="javascript:this.src='../images/upimg.png'"
height="70" width="100" style="margin-left:63"
src='../images/upimg.png' upfile="vedios" /> <input type="file"
style="display: none;" upfile="videos" id="vedios" accept="video/*"
name="vediofiles" />
<div class="form-group" style="padding-left:20px; background-color:white;">
<label for="exampleInputAccount1" >视频文件名:</label> ${vedioname}
</div>

</div>

<div class="form-group" style="display:none; height:76" id="div2"
name="divgroup">
<img id="imgs" οnerrοr="javascript:this.src='../images/upimg.png'"
height="70" width="100" style="margin-left:63"
<c:if test="${water.images == null||water.images == ''}">
src="../images/upimg.png" 
</c:if>
<c:if test="${water.images != null&&water.images != ''}">
src="${water.images}" 
</c:if>
upfile="images" /> <input type="file" style="display: none;"
id="images" accept="image/*" name="imagefiles" />
</div>

。。。省略其余两个，注意，首先展示的导航栏的class设置为active，对应的div的display设置为block

其他不展示的div暂时设置为style="display:none; "

最后加入导航栏中各个li声明的点击事件。

<script type="text/javascript">


function tabclick(n) {
$("div[name='divgroup']").hide();
$("li").removeClass("active");
$("#div" + n).show();
$("#tab" + n).addClass("active");

}

</script>