单击每个选项卡时使用struts 1，js，ajax显示不同的数据

Question

introduction : I am developing Newsetter in struts1, tiles .For front-end i use js and ajax. I have 8 tabs on the top of page. I want to show different data on click of each tab. As tab (Button) is clicked, a JS function is called which use AJAX call to call action class which set properties of form (respective to that action.) and then I forward to my left.jsp (left.jsp is one file in my layout, used in tiles ). My left.jsp looks like:

<div id="left1">
  <form name="Project" method="post" >
    <bean:write name="Project" property="name" />
  </form>
  <form name="KnowAMSS" method="post" >
    <bean:write name="KnowAMSS" property="namexyz" />
  </form>
</div>

** Project and KnowAMSS are two tabs among 8 tabs.

Problem : When I click on another tab same process goes on and displays data to respective tab.. But it also displays the data of previously clicked tab. I don't want those .I want data for only that tab which I have pressed recently . Please help me out in this . Thanks .

Answer 1

There are different way to accomplish your task...

I recommend you to use an external library like jquery-ui

Here the example:

http://jqueryui.com/demos/tabs/default.html

The source code is very simple just:

Javascript:

$(function() {
    $( "#tabs" ).tabs();
});

HTML:

  <div id='tabs'>
      // your HTML code
  </div>