在JSP中创建标签

问题描述

我有一个jsp页面显示3个链接。
我试图创建3个选项卡，将引用这3个链接。

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).

我知道如何创建如下标签：

I know how to create tabs like these:

上述代码tabs：

<div class="tagtable">
    <ul class="tabs">
        <a href="#tab1">Home </a>     &nbsp
        <a href="#tab2">Profile</a>   &nbsp
        <a href="#tab3">Settings </a>     &nbsp
    </ul>
    </div>

但我想创建的是这样：

But what i want to create is like these :

第一张图片中的标签看起来更像urls（带下划线），但在第二个例子中，它们只显示文本，但是当点击时，它们导航到一个页面。

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.

感谢您的时间。

推荐答案

：

调整或更改您的requiremnets的CSS。

p>

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： b

$('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;  
        });  
    });  
});  

更多详细信息：GO FOR

FOR MORE DETAILED INFORMATION: GO FOR create-flipping-content-tabs-using-jquery

这篇关于在JSP中创建标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！