在JSP中创建选项卡

我有一个显示3个链接的jsp页面。 我正在尝试创建3个选项卡，这些选项卡将引用这3个链接。 （标签看起来比显示链接更好）。

我知道如何创建这样的标签：

上述标签的代码：

 
 Home  &nbsp Profile &nbsp Settings  &nbsp 
  

但我想要创建的是这样的：

第一个图像的区别在于标签看起来更像url（带下划线），但在第二个示例中，它们只显示文本，但在点击时它们会导航到页面。

如何在第二张图片中创建标签。

感谢您的时间。

Answer 1

如此处所示 ：

根据您的要求调整或更改css .. !!

HTML ：

  
 
 
Recent
 
Popular
 
Comments
 
 
 
  
 
  
 
  
 
  

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; }); }); }); 

有关更多详细信息：请参阅create-flipping-content-tabs-using-jquery