Bootstrap中导航条组件之标签页的简单应用

        Bootstrap是一个非常好用的Beb前端开发框架，它提供了三种方式的导航条组件：标签页、pill和列表。这里讲述的是标签页的使用。

        查看官方网页，可知标签页的基本使用方式：

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">首页</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

 

        我们要在不同的标签之间切换，就可以在a标签的指向路径上利用action进行请求后台，然后再在struts中配置这个action的跳转路径，到某个jsp中去。

<ul class="nav nav-tabs">
  <li class="active" id="action1">
    <a href="action1.action">首页</a>
  </li>
  <li id="action2"><a href="action2.action">标签二</a></li>
  <li id="action3"><a href="action3.action">标签三</a></li>
</ul>

 

        这里以actin1.action为例，在struts中配置：

        

<action name="action1" class="action1" method="action1">
		  <result name="action1">/WEBINF/page/action1.jsp</result>
</action>

 

        在方法action1()中做一些数据初始化之类的操作，然后进入action1.jsp中将数据进行展示、刷新等常规操作。其他的标签、action、jsp也是类似的。

        这个标签页组件当然是要在三个jsp文件中都有的，也就是说三个标签就要有三个独立的jsp文件，这三个jsp中都得有这同一个标签组件，我们可以通过将这个标签页写在另外一个jsp中，然后在这三个jsp中用jsp标签引入即可：<jsp:include page="navigation-area.jsp" />，navigationg-area.jsp中就是放入了这个共同的标签页组件的jsp文件。

        如果我们选择的是标签二或者标签三，总之不是首页，现在要进行刷新，那么，就要在它们的jsp中进行必要的处理，否则，一刷新，就会回到第一个标签里面去。需要在action1.jsp、action2.jsp、action3.jsp等每个标签的jsp里面用这样一个jquery语句：

 

<script type="javascript/text">
        $(document).ready(function(){
	        $("#action1").attr("class", "active");
});
</script>

 

 

意思就是说通过找到标签的id，将它这个标签的样式设置为active。

 

如有更好的方法，欢迎前来指导！！！

 

效果图：