jsp做的网页怎么实现类似tab页的功能，顶者有分

Question

无非是做一些类似 Tab标签 的图片，排在一起，被选中的图片底色要亮一些（每个tab图片做两张），并把图片做成链接，可以点击。图片下面是<table></table>，显示数据。
当用户单击某个 Tab标签 图片时，刷新当前页面，在table里显示对应与Tab的数据即可。要注意的是，刷新完页面之后，用户刚才点击的那个Tab图片是高亮的。

Answer 1

我的blog中有一篇小文，你看一下。
http://blog.csdn.net/_chage/archive/2004/12/14/215494.aspx如果你这个tab菜单被多处用到，即这个东东有重用的价值，建议使用tiles或struts-menu这样的组件。

Answer 2

很简单啊,用图片互换不就行了,javascript就可以的

Answer 3

这个可以不用jsp就可以,用html加javascript就可以很容易实现的。在页里加几个DIV，而后写一个脚本来控制

Answer 4

谢谢各位的指点，可小弟以前是做vc的，没学过javascript,因工作需要要做一点网页，能不能提供一些代码给我参考一下。

Answer 5

我在上面不是告诉你了我的 blog中有几种实现了吗，另存为就可以看到了，是用css的，没有用任何图片，完全符合web标准。
我就知道你肯定是要代码的，另存为对你来说应该不难吧。

Answer 6

如果没有要求tab到最下面返回到第一个的话，完全用tabindex就行了,
如果要设返回的话得用一下javascript

Answer 7

用表格做和iframe配合加上css就可以了，

Answer 8

<?XML:NAMESPACE PREFIX="TSNS" />
<?IMPORT NAMESPACE="TSNS" IMPLEMENTATION="tabstrip.htc" />
<TSNS:TabStrip id="operTab" SepDefaultSytle="width:10px;border-bottom:solid 1px #dddddd" selectedIndex="0" targetID="mpgPages" tabDefaultStyle="width:90px;border:solid 1px #dddddd;background:#ffffff;padding:5px;" tabHoverStyle="color:red;" tabSelectedStyle="background:#efefef;border-bottom:none;">
<TSNS:Tab>第一页标题</TSNS:Tab>
<TSNS:TabSeparator />
<TSNS:Tab>第二页标题</TSNS:Tab>
</TSNS:TabStrip>
<?XML:NAMESPACE PREFIX="MPNS" />
<?IMPORT NAMESPACE="MPNS" IMPLEMENTATION="multipage.htc" />
<MPNS:MultiPage id="mpgPages"  style="background-color:#EFEFEF;border-style:Solid;height:550px;width:650px;BORDER-RIGHT: #dddddd 1px solid; BORDER-TOP: medium none; BORDER-LEFT: #dddddd 1px solid; BORDER-BOTTOM: #dddddd 1px solid; 10px: ">
<MPNS:PageView>第一页内容</MPNS:PageView>
<MPNS:PageView>第二页内容</MPNS:PageView>
</MPNS:MultiPage>

Answer 9

<!--
multipage.htc
--><public:component tagName="MultiPage" lightweight="true">
<public:property name="selectedIndex" get="GetPageIndex" put="SetPageIndex" persist="true" value="0" id="propSelectedIndex" />
<public:property name="numPages" get="NumPages" id="propNumPages" />
<public:method name="createPageAt" internalname="f_CreatePageAt" />
<public:event name="onselectedindexchange" id="evtPageChange" />
<public:attach event="oncontentready" onevent="Init()" />
<public:defaults
tabStop="false"
contentEditable="false"
canHaveHTML="true"
viewInheritStyle="true"
viewMasterTab="false"
viewLinkContent="false"
style="display:block;visibility:hidden;overflow:auto"
/>
<script language="JScript">
var _PageIndex = null;
var _bInitProcess;
function f_CreatePageAt(index)
{
var numPages = NumPages();
if ((index < 0) || (index > numPages))
index = numPages;
var page = element.document.createElement("PageView");
page.style.display = "none";
page.attachEvent("onpropertychange", OnPropertyChange);
if (index == numPages)
{
element.appendChild(page);
}
else
{
element.children[index].insertAdjacentElement("beforeBegin", page);
}
if (index <= _PageIndex)
{
_bInitProcess = true;
SetPageIndex(_PageIndex + 1);
_bInitProcess = false;
}
if (!_bInitProcess)
{
propNumPages.fireChange();
if (_PageIndex < 0)
SetPageIndex(0);
}
return page;
}
function OnPropertyChange()
{
if (event.propertyName.toLowerCase() == "activate")
{
var oNode = event.srcElement;
var bActivate = oNode.getAttribute("activate");
if ((bActivate != null) && (bActivate))
{
SetPageIndex(ConvertPageToIndex(oNode));
}
}
}
function Init()
{
_bInitProcess = true;
ProcessContent();
var initIndex;
if (numPages == 0)
initIndex = -1;
else if ((_PageIndex == null) || (_PageIndex == "") || (_PageIndex < 0) || (_PageIndex >= numPages) || (GetPage(_PageIndex) == null))
initIndex = 0;
else
initIndex = _PageIndex;
_PageIndex = -1;
SetPageIndex(initIndex);
defaults.style.visibility = "inherit";
_bInitProcess = false;
}
function ProcessContent()
{
for (var nIndex = 0; nIndex < element.childNodes.length; nIndex++)
{
var node = element.childNodes[nIndex];
if ((node.tagName != null) && (node.tagName.toLowerCase() == "pageview"))
{
node.style.display = "none";
node.attachEvent("onpropertychange", OnPropertyChange);
}
else
{
node.removeNode(true);
nIndex--;
}
}
}
function NumPages()
{
return element.childNodes.length;
}
function GetPage(nIndex)
{
if ((nIndex == null) || (nIndex < 0) ||
(nIndex >= element.childNodes.length))
return null;
return element.childNodes[nIndex];
}
function ConvertPageToIndex(page)
{
for (var nIndex = 0; nIndex < element.childNodes.length; nIndex++)
{
var node = element.childNodes[nIndex];
if (node.uniqueID == page.uniqueID)
return nIndex;
}
return -1;
}
function GetPageIndex()
{
return _PageIndex;
}
function SetPageIndex(value)
{
if (_PageIndex == value)
return;
var page = GetPage(value);
var prevPage = GetPage(_PageIndex);
if ((_PageIndex == null) || (page != null))
_PageIndex = value;
if (page == null)
return;
if (prevPage != null)
{
prevPage.style.display = "none";
}
page.style.display = "block";
if (!_bInitProcess)
{
var oEvent = CreatePageEvent(value, page);
evtPageChange.fire(oEvent);
}
if (!_bInitProcess)
propSelectedIndex.fireChange();
}
function CreatePageEvent(index, page)
{
oEvent = createEventObject();
oEvent.selectedIndex = index;
oEvent.page = page;
return oEvent;
}
</script>
</public:component>

Answer 10

tabstrip.htc
太长了,发不了,要的话给邮箱地址