Java 在 JSP 中创建选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20811206/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating Tabs in JSP
提问by Shehan.W
I have a jsp page which displays 3 links. I am trying to create 3 tabs which will refer to those 3 links. (Tabs will look much more nicer than displaying links).
我有一个显示 3 个链接的 jsp 页面。我正在尝试创建 3 个选项卡，它们将引用这 3 个链接。（标签看起来比显示链接更好）。
I know how to create tabs like these:
我知道如何创建这样的标签：
Code for the above tabs:
上述选项卡的代码：
<div class="tagtable">
<ul class="tabs">
<a href="#tab1">Home </a>  
<a href="#tab2">Profile</a>  
<a href="#tab3">Settings </a>  
</ul>
</div>
But what i want to create is like these :
但我想创造的是这样的：
The difference in the first image the tabs they look more like urls (with underline) , but in the second example they just show only the text but when clicked they navigate to a page.
第一张图片的不同之处在于，它们看起来更像 url（带下划线），但在第二个示例中，它们只显示文本，但单击时会导航到页面。
How do i create tabs like in the second image.
我如何像第二张图片中那样创建标签。
Thank you for your time.
感谢您的时间。
采纳答案by Sajad Karuthedath
As presented here:
如此处所示：
adjust or change the css for your requiremnets..!!
为您的需求调整或更改 css..！！
HTML:
HTML:
<div id="flip-tabs" >
<ul id="flip-navigation" >
<li class="selected"><a href="#" id="tab-0" >Recent</a></li>
<li><a href="#" id="tab-1" >Popular</a></li>
<li><a href="#" id="tab-2" >Comments</a></li>
</ul>
<div id="flip-container" >
<div>
<!--Put Content for first tab here-->
</div>
<div>
<!--Put Content for second tab here-->
</div>
<div>
<!--Put Content for third tab here-->
</div>
</div>
</div>
CSS:
CSS：
#flip-tabs{
width:300px;
margin:20px auto; position:relative;
}
#flip-navigation{
margin:0 0 10px; padding:0;
list-style:none;
}
#flip-navigation li{
display:inline;
}
#flip-navigation li a{
text-decoration:none; padding:10px;
margin-right:0px;
background:#f9f9f9;
color:#333; outline:none;
font-family:Arial; font-size:12px; text-transform:uppercase;
}
#flip-navigation li a:hover{
background:#999;
color:#f0f0f0;
}
#flip-navigation li.selected a{
background:#999;
color:#f0f0f0;
}
#flip-container{
width:300px;
font-family:Arial; font-size:13px;
}
#flip-container div{
background:#fff;
}
JAVASCRIPT:
爪哇脚本：
$('document').ready(function(){
//initialize quickflip
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function(){
$(this).click(function(){
$('#flip-navigation li').each(function(){
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
//extract index of tab from id of the navigation item
var flipid=$(this).attr('id').substr(4);
//Flip to that content tab
$('#flip-container').quickFlipper({ }, flipid, 1);
return false;
});
});
});
FOR MORE DETAILED INFORMATION: GO FOR create-flipping-content-tabs-using-jquery
有关更多详细信息：转到create-flipping-content-tabs-using-jquery
