You often have to develop applications that expose different features and it is possible to implement different solutions; one of these solutions is to put each feature within a different tab.

In this article we will learn to use, in your JSP pages, the tabs provided by Liferay taglib.

First prepare the main JSP page, which is typically the view.jsp page; but before see the source code let's say that each tab will be associated to a different page, accessible by clicking on the tab itself.

<%
// Tab value to preselect on page load
// Default parameter name used by the taglib is "tabs1"
String currentTab = ParamUtil.getString(request, "tabs1", "tab1");
%>

<!-- This is the link associated to every tab to load the specific page -->
<liferay-portlet:renderURL var="changeTabURL" />

<!--
    Tabs' definition; "names" attribute has multiple functions: it defines the tabs
    to display, the translation's keys and the values ​​to compare with "currentTab"
    parameter. In addition, you can specify the URL to associate to each tab
-->
<liferay-ui:tabs
    names="tab1,tab2,tab3"
    url="<%= changeTabURL %>"
/>

<!--
    Each tab is associated with a different page and this taglib allows you to include
    the correct page depending on the value of the "currentTab" parameter; all tabs'
    pages tabs are placed in a special subfolder.
    The "servletContext" parameter, set to "application", is used to determine that
    the pages must be searched in the context of the current application and not through
    the pages of the portal
-->
<liferay-util:include
    page='<%= "/html/tab_sample/tabs/" + TextFormatter.format(currentTab, TextFormatter.N) + ".jsp" %>'
    servletContext="<%= application %>"
/>

Let's read TextFormatter class article for details on the use of the class that generates the file name of the JSP page to display. 

The work is finished, now you just need to create the JSP pages for the individual tab (which must be named as the tabs themselves):

• html/tab_sample/tabs/tab1.jsp;
• html/tab_sample/tabs/tab2.jsp;
• html/tab_sample/tabs/tab3.jsp.

Before concluding there's a last issue: when you work with tabs you must never forget that every URL must always have the "tabs1" parameter in order to fit properly in the tab you want, for example:

<liferay-portlet:renderURL var="gotoTab2URL">
    <liferay-portlet:param name="mvcPath" value="/html/tab_sample/view.jsp" />
    <liferay-portlet:param name="tabs1" value="tab2" />
</liferay-portlet:renderURL>