我有一个显示3个链接一个jsp页面。我想创建3个标签,这将是指那些3个环节。 (标签看起来不是显示的链接更漂亮)。
我知道如何创建标签这样的:
代码上面的标签:
<div class="tagtable">
<ul class="tabs">
<a href="#tab1">Home </a>  
<a href="#tab2">Profile</a>  
<a href="#tab3">Settings </a>  
</ul>
</div>
但我想创造什么是这样的:
第一图像中的不同的标签,他们看起来更像的网址(下划线),但在第二个例子中,他们只是只显示文本,但点击时,他们浏览到一个页面。
如何创建标签像第二个形象。
感谢您的时间。
由于提出here:
调整或改变的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>
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;
});
});
});