How to create Tabs UI using HTML, CSS, jQuery, JSP and JavaScript? Example (original) (raw)

If you scan through this JSP file, the first part is importing Java classes like ArrayList, List, and a domain class Contact, next is importing tab libraries like display tag and JSTL core tag library.

Since we are also displaying tabular data, for this sample purpose, I had used dispalytag.css file, available in display tag examples, when you download display tag. Next is our custom CSS required for tabbed UI and then we have jQuery code, which does the magic of creating tabs and managing them i.e. keeping track of which tab is active and changing its CSS class to highlight it.

To create tabs in the JSP page, we have used an unordered list

, which contains two list items for each tab. This list item hyperlink to two <div** id='tab1'**> blocks, with id tab1 and tab2, which acts as a container to hold tab data. Since we need to show HTML tables inside tabs, we have put display:table inside these divs.

Magic of showing data only from active tab is done using CSS. Each container div has a CSS class class="tab_content" , which is just display:none, to make them invisible. When page loads, jQuery get hashtag from current URL to find out which tab is active, and subsequently assign it a class called active, and make it visible.

Same thing is done on the click as well. When use clicks one of the tab, jQuery first removes active class from previous tab and then assign it to new tab. It then hides the previous tab and show new tab by calling show() method. You can even use jQuery methods fadeIn() and fadeOut() instead of show() and hide() for better effects.

<%@**page import="java.util.ArrayList"**%>

<%@**page import="com.web.revision.Contact"**%>

<%@**page import="java.util.List"**%>

<%@**page contentType="text/html" pageEncoding="UTF-8"**%>

<%@** taglib prefix="display" uri="http://displaytag.sf.net" **%>

<%@** taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" **%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"" title="undefined" rel="noopener noreferrer">http://www.w3.org/TR/html4/loose.dtd">

<meta** http-equiv="Content-Type" content="text/html; charset=UTF-8"**>

<strong>JQuery Tab Example</strong>

<link** rel="stylesheet" href="css/displaytag.css" type="text/css"**>

<link** rel="stylesheet" href="css/screen.css" type="text/css"**>

<link** rel="stylesheet" href="css/site.css" type="text/css"**>

<script** src="" title="undefined" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"**\>

<%

List cricketers = new ArrayList();

cricketers.add(new Contact("Kohli", 98273633, "Mohali"));

cricketers.add(new Contact("Dhoni", 98273634, "Ranchi"));

cricketers.add(new Contact("Sehwag", 98273635, "Delhi"));

cricketers.add(new Contact("Rahane", 98273636, "Jaipur"));

cricketers.add(new Contact("Gambhir", 98273637, "Delhi"));

cricketers.add(new Contact("Rohit", 98273638, "Mumbai"));

cricketers.add(new Contact("Dinda", 98273639, "Kolkata"));

cricketers.add(new Contact("Ashwin", 98273640, "Chennai"));

session.setAttribute("contacts", cricketers);

List actors = new ArrayList();

actors.add(new Contact("SRK", 98273633, "Mohali"));

actors.add(new Contact("Salman", 98273634, "Ranchi"));

actors.add(new Contact("Hrithik", 98273635, "Delhi"));

actors.add(new Contact("Ajay", 98273636, "Jaipur"));

actors.add(new Contact("Imran", 98273637, "Delhi"));

actors.add(new Contact("John", 98273638, "Mumbai"));

actors.add(new Contact("Akshay", 98273639, "Kolkata"));

actors.add(new Contact("Sunil", 98273640, "Chennai"));

session.setAttribute("actors", actors);

%>

<ul** id='tabs' class="tabss"**>

  • <a** href='#tab1'**>Tab 1

  • <a** href='#tab2'**>Tab 2

    • <div** id='tab1' class="tab_content" **>

    Section 1

    **

    **This is First TAB

    <display:table name="sessionScope.contacts"

    requestURI="#tab1" pagesize="5"

    export="true" sort="list" uid="one">

    <display:column property="name" title="Name"

    sortable="true" headerClass="sortable" />

    <display:column property="contact" title="Contact"

    sortable="true" headerClass="sortable" />

    <display:column property="city" title="City"

    sortable="true" headerClass="sortable" />

    <div** id='tab2' class="tab_content"**>

    Section 2

    This is SECOND TAB

    <display:table name="sessionScope.actors" requestURI="#tab2"

    pagesize="5" export="true" sort="list" uid="two">

    <display:column property="name" title="Name" sortable="true"

    headerClass="sortable" />

    <display:column property="contact" title="Contact" sortable="true"

    headerClass="sortable" />

    <display:column property="city" title="City" sortable="true"

    headerClass="sortable" />

    Output
    This is how our tabbed UI looks when displayed as HTML in the client's browser. Active Tab is shown with pink, not a good choice but serves the purpose of highlight it. You can see the contents of tab 1 has normal HTML code as well as table data generated from the display tag.