很好用的一个JS实现TabMenu

 一个页面中有太多的内容得拉滚动条才能看到所有的内容，如果使用WebF可以实现漂亮的Tab Pane,用它不但可以把零乱的Sidebar内容整合，而且还能动态地显示出各各内容，节省了空间，页面又变得整洁，甚是实用.

1. 首先需要下载TabPane的源代码, 然后将其中的CSS, JS, LOCAL目录和demo.html, memdemo.html, tabpane.html解压到工程目录中

2.接下来就是把JS和CSS引用进到所要用到的JSP页面,最好添加在head标签之前:

<script type="text/javascript" src="js/tabpane.js"></script>
<link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" />

当然, 这里的"src"和"href"后面的地址都要换成你实际存放的位置.在JSP页面某处，最好是一个<table></table>中添加TabPane的模板代码如下:

<div class="tab-pane" id="tab-pane-1">

 

<script type="text/javascript">
var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );
</script>

   <div class="tab-page" id="tab-page-1">
      <h2 class="tab">General</h2>

      <script type="text/javascript">
      tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );
      </script>

      This is text of tab 1. This is text of tab 1.
      This is text of tab 1. This is text of tab 1.

   </div>

   <div class="tab-page" id="tab-page-2">
      <h2 class="tab">Privacy</h2>

      <script type="text/javascript">
      tabPane1.addTabPage( document.getElementById( "tab-page-2" ) );
      </script>

      This is text of tab 2. This is text of tab 2.
      This is text of tab 2. This is text of tab 2.

   </div>
</div>

3. 这样就可以啦, 如果想进一步更改它的样式, 就修改相应的CSS好了.