XQA
Back to Java
2026-01-267 min read

Tab Headers (Java)

Learn Tab Headers (Java) step by step with clear examples and exercises.

Why This Matters

Java tab headers are an essential part of web development, allowing you to organize content effectively and create a user-friendly interface. In this tutorial, we'll look closely at understanding how to create and use tab headers in your Java projects.

Why This Matters

Tab headers play a crucial role in structuring web pages, making it easier for users to navigate through different sections of content. They are particularly important when dealing with complex websites or applications that require multiple tabs to present various data or features. By mastering tab headers, you'll be able to create more engaging and efficient user interfaces.

Prerequisites

Before diving into the core concept of creating tab headers in Java, it is essential to have a good understanding of:

  1. HTML and CSS basics
  2. Java Servlets and JSP fundamentals
  3. Understanding of web development concepts like request-response cycle, HTTP protocol, and MIME types

Core Concept

To create tab headers in a Java project, we will use HTML and CSS for the frontend design and Java Servlets or JSP for the backend implementation. Let's start by creating an example with three tabs: Home, About Us, and Contact Us.

HTML and CSS

First, let's create an HTML file (index.html) with our tab structure using basic HTML and CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab Headers Example</title>
<style>
.tab {
display: none;
}
#homeTab.active ~ .tab, #aboutTab.active ~ .tab, #contactTab.active ~ .tab {
display: block;
}
</style>
</head>
<body>
<div id="content">
<input type="radio" name="tab" id="homeTab" checked />
<label for="homeTab">Home</label>
<div class="tab homeTab">
<!-- Home tab content -->
</div>

<input type="radio" name="tab" id="aboutTab" />
<label for="aboutTab">About Us</label>
<div class="tab aboutTab">
<!-- About Us tab content -->
</div>

<input type="radio" name="tab" id="contactTab" />
<label for="contactTab">Contact Us</label>
<div class="tab contactTab">
<!-- Contact Us tab content -->
</div>
</div>
</body>
</html>

In this example, we have created three tabs (Home, About Us, and Contact Us) using HTML input elements for toggling the active tab and labels for displaying the tab names. The content of each tab is wrapped in a corresponding div with the class tab. We've also added some basic CSS to hide all tabs initially and only show the active one when its associated radio button is checked.

Java Servlets or JSP

Now, let's implement the backend using Java Servlets:

  1. Create a new servlet named TabServlet:
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

public class TabServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
processRequest(request, response);
}

private void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String tabId = request.getParameter("tab");
if (tabId != null) {
switch (tabId) {
case "homeTab":
out.println("<div class='homeTab'>Home Tab Content</div>");
break;
case "aboutTab":
out.println("<div class='aboutTab'>About Us Tab Content</div>");
break;
case "contactTab":
out.println("<div class='contactTab'>Contact Us Tab Content</div>");
break;
}
} else {
// If no tab is selected, display all tabs initially
out.println("<input type='radio' name='tab' id='homeTab' checked />");
out.println("<label for='homeTab'>Home</label>");
out.println("<div class='tab homeTab'>Home Tab Content</div>");

out.println("<input type='radio' name='tab' id='aboutTab' />");
out.println("<label for='aboutTab'>About Us</label>");
out.println("<div class='tab aboutTab'>About Us Tab Content</div>");

out.println("<input type='radio' name='tab' id='contactTab' />");
out.println("<label for='contactTab'>Contact Us</label>");
out.println("<div class='tab contactTab'>Contact Us Tab Content</div>");
}
} finally {
out.close();
}
}
}

In this servlet, we handle both GET and POST requests by calling the processRequest() method. The method sets the content type to text/html, gets a PrintWriter to write the HTML response, and then either displays all tabs initially or shows the selected tab's content based on the provided tab ID in the request parameters.

Servlet Mapping

Finally, let's map our servlet to the appropriate URL pattern:

<servlet>
<servlet-name>TabServlet</servlet-name>
<servlet-class>TabServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>TabServlet</servlet-name>
<url-pattern>/index.html</url-pattern>
</servlet-mapping>

Add these lines to your web.xml file, located in the WEB-INF directory of your project.

Worked Example

Now that you have learned how to create tab headers using Java Servlets, let's work on a more complex example involving multiple tabs and dynamic content loading.

HTML and CSS

Modify the index.html file from our initial example by adding additional tabs:

<!DOCTYPE html>
<!-- ... -->
<body>
<div id="content">
<!-- ... -->

<input type="radio" name="tab" id="moreTab" />
<label for="moreTab">More</label>
<ul class="tabs-menu">
<li><a href="#more1" data-tab="more1">Tab 1</a></li>
<li><a href="#more2" data-tab="more2">Tab 2</a></li>
<li><a href="#more3" data-tab="more3">Tab 3</a></li>
</ul>
<div id="more1" class="tab moreTab">
<!-- Tab 1 content -->
</div>
<div id="more2" class="tab moreTab">
<!-- Tab 2 content -->
</div>
<div id="more3" class="tab moreTab">
<!-- Tab 3 content -->
</div>
</div>
</body>
<!-- ... -->

In this example, we have added a More tab with three sub-tabs. We've also created an unordered list (ul) for the tabs menu and used anchor tags (a) to link each tab to its corresponding content.

Java Servlets or JSP

Update the TabServlet class by adding support for the new tabs:

// ...
private void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// ...

String tabId = request.getParameter("tab");
if (tabId != null && !tabId.equalsIgnoreCase("moreTab")) {
// If it's not the More tab, process as before
// ...
} else if (tabId == null || tabId.equalsIgnoreCase("moreTab")) {
// If the More tab is selected or no tab is provided, show all sub-tabs
out.println("<input type='radio' name='tab' id='moreTab' checked />");
out.println("<label for='moreTab'>More</label>");
out.println("<ul class='tabs-menu'>");
// ... (add HTML for the tabs menu)
out.println("</ul>");

out.println("<div id='more1' class='tab moreTab'>");
// ... (add content for Tab 1)
out.println("</div>");

out.println("<div id='more2' class='tab moreTab'>");
// ... (add content for Tab 2)
out.println("</div>");

out.println("<div id='more3' class='tab moreTab'>");
// ... (add content for Tab 3)
out.println("</div>");
}
}
// ...

In this updated servlet, we have added support for the More tab by checking if tabId is null or equals "moreTab". If either condition is true, we show all sub-tabs and their content.

Common Mistakes

  1. Forgetting to include the necessary CSS styles to hide and display tabs correctly.
  2. Not handling the click event on the tabs menu items to update the active tab.
  3. Failing to properly map the servlet to the correct URL pattern in web.xml.
  4. Incorrectly setting the content type or response encoding in the servlet.
  5. Forgetting to close PrintWriter after writing the HTML response.

Practice Questions

  1. How can you add more tabs to your example?
  2. What is the purpose of the CSS styles applied to the tab structure?
  3. Can you explain how the anchor tags in the tabs menu are used to navigate between tabs?
  4. Why is it essential to close PrintWriter after writing the HTML response?
  5. How can you improve the performance of your example by using AJAX to load content dynamically instead of reloading the entire page?

FAQ

Q: Can I use JavaScript instead of Java Servlets for implementing tab headers?

A: Yes, you can create tab headers using plain HTML, CSS, and JavaScript without involving Java on the server-side.

Q: Why are the tabs hidden initially in our example?

A: The tabs are hidden to ensure that only one tab is visible at a time when the page loads. This improves the user experience by preventing content overlap.

Q: Can I use other HTML elements instead of input radio buttons for toggling tabs?

A: Yes, you can use other HTML elements like checkboxes or custom icons to toggle tabs, but the underlying logic remains the same: updating the active tab based on user interaction.

Q: How can I style my tabs to match a specific design or theme?

A: You can modify the CSS styles applied to the tabs and their content to achieve your desired look and feel. Experiment with different properties like colors, fonts, padding, and margins to customize the appearance of your tab headers.

Q: Can I use tab headers in a mobile-first design?

A: Yes, you can create responsive tab headers that adapt to various screen sizes by using media queries and adjusting the CSS styles accordingly. Ensure that your tabs are easily accessible on touch devices as well.

Tab Headers (Java) | Java | XQA Learn