Java 在JSP中创建选项卡
我有一个显示3个链接的jsp页面。 我正试图创建3个标签,将引用这3个链接。(标签将比显示链接更好看) 我知道如何创建如下选项卡: 上述选项卡的代码:Java 在JSP中创建选项卡,java,css,jsp,hyperlink,tabs,Java,Css,Jsp,Hyperlink,Tabs,我有一个显示3个链接的jsp页面。 我正试图创建3个标签,将引用这3个链接。(标签将比显示链接更好看) 我知道如何创建如下选项卡: 上述选项卡的代码: <div class="tagtable"> <ul class="tabs"> <a href="#tab1">Home </a>   <a href="#tab2">Profile</a> &n
<div class="tagtable">
<ul class="tabs">
<a href="#tab1">Home </a>  
<a href="#tab2">Profile</a>  
<a href="#tab3">Settings </a>  
</ul>
</div>
 
 
 
但我想创造的是这样的:
第一个图像中的不同之处在于,选项卡看起来更像URL(带有下划线),但在第二个示例中,它们仅显示文本,但单击时会导航到页面
如何创建第二幅图像中的选项卡
感谢您抽出时间。如所示:
根据您的需求调整或更改css
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>
JAVASCRIPT:
#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;
}
$('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;
});
});
});
欲了解更多详细信息,请点击你所说的“完成CSS任务”是什么意思?谢谢,我想你可以使用js和css的通用html,下面的链接会很有帮助。