Tab implementation in jsp

Question

1.00/5 (1 vote)

See more:

JSP

I want to implemets Tabs in JSP, How can i do this, i need urgent

Posted 8-Apr-13 2:15am

tekskills

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Shubhashish_Mandal · Answer 1 · 2013-04-08T02:31:00

Solution 1

Using div/javascript/jquery/css you can able to create tabs in jsp.There are lots of example available in web to create tabs. So google it

Posted 8-Apr-13 2:31am

Shubhashish_Mandal

Comments

tekskills 16-Apr-13 8:07am

This is my code, but not working
memberProfiles.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Medical Center - Member Profile Management</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />


<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />


<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/components.css" rel="stylesheet" type="text/css" />
<link href="css/content.css" rel="stylesheet" type="text/css" />
<link href="css/tab.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.js" charset="utf-8"></script>
<script type="text/javascript" src="js/tab.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".tabLink").each(function(){
$(this).click(function(){
tabeId = $(this).attr('id');
$(".tabLink").removeClass("activeLink");
$(this).addClass("activeLink");
$(".tabcontent").addClass("hide");
$("#"+tabeId+"-1").removeClass("hide")
return false;
});
});
});

</script>
</head>
<body>
<form:form method="post" action="memberProfiles.htm" commandName="member">

<div class="wrapper">

<div class="siteHeader">
<div class="logoSection">
<img src="images/logo.gif" alt="HESI-RAY" title="HESI-RAY" />
</div>
<div class="loginSection">
<img src="images/welcome.gif" alt="Welcome to Member Online Services" title="Welcome to Member Online Services" />
<div class="statusBar">
<img src="images/iconMember.gif" alt="" title="" />
<span>You are signed in as: <span class="head">Jane Doe <span class="seperator">|</span></span> Profile <span class="seperator">|</span> Sign Out</span>
</div>
</div>
<div class="icon">
<ul>
<img src="images/icon-linkedin-small.png" alt="LinkedIn" title="LinkedIn" />
<img src="images/icon-facebook-small.png" alt="facebook" title="facebook" />
<img src="images/icon-twitter-small.png" alt="twitter" title="twitter" />
</ul>
</div>

<div class="globalNav">

<ul class="mainNav" id="nav">
<li class="link1 ">
Home
</li>
<li class="link2 ">
Provider

</li>
<li class="link3 current">
Member

</li>
<li class="link4 ">Make Appointment

</li>
<li class="link5"> Payers

tekskills 16-Apr-13 8:10am

<li class="link6"> EHR
<li class="link7"> Contact Us
<li class="link8"> About Us
</ul>

</div>
</div>

<div class="siteContent SingleColLayout">
<div class="horizontalNav">
<ul>
<li >MemberHome<span class="seperator">|</span></li>
<li >Member Registry<span class="seperator">|</span></li>
<li class="current" >Member Profile<span class="seperator">|</span></li>
<li>Appointment DashBoard</li>

</ul>
</div>
<div class="clearFix">

</div>
<div class="contentSection Hesi-Ray ProviderRegistration mrStep3">
<div class="bannerSection">
<div class="bannerName billing">

Profile Management

</div>
<img src="images/billingBannerRtImg.jpg" alt="Billing" title="Billing" />
</div>
<div class="baseCol2">
<div class="clearFix">

</div>
<div class="plainBox" id="firstBox">
<div style="border: 0px solid #ccc; margin-top: 10px;">

<div class="tab-box">
MyProfile
Medications
Alergies
Surgeries
Diseases
WomenOnly
DentalHistory
</div>

<div class="tabcontent" id="cont-1-1">
<table width="100%" cellpadding="0" cellspacing="0" border="1px"
bordercolor="#FFFFFF">
<tr>
<td>
<table class="formTable1" cellspacing="43px";>
<br/><br/>
<div>
<img src="images/profilePhoto1.jpg" alt="" />
</div><br/>
<input type="file" name="datasize" size="25" /><input type="button" value="Upload"
önclick="showModal('paperlessBenefits.htm'); return false;" />
<tbody>
</tbody>
</table>
</td>
<td>
<table class="formTable1" border="1px" bordercolor="#FFFFFF">
<tbody>
<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="firstName">
<spring:message code="label.FirstName">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"><form:input path="firstName" /></td>
<td><form:errors path="firstName" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="lastName">
<spring:message code="label.LastName">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="lastName" /></td>
<td><form:errors path="lastName" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span

tekskills 16-Apr-13 8:11am

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="dateOfBirth">
<spring:message code="label.DateofBirth">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="dateOfBirth" /></td>
<td><form:errors path="dateOfBirth" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="address1">
<spring:message code="label.Address1">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="address1" /></td>
<td><form:errors path="address1" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="address2">
<spring:message code="label.Address2">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="address2" /></td>
<td><form:errors path="address2" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="city">
<spring:message code="label.City">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="city" /></td>
<td><form:errors path="city" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="state">
<spring:message code="label.State">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="state" /></td>
<td><form:errors path="state" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="zipCode">
<spring:message code="label.ZipCode">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="zipCode" /></td>
<td><form:errors path="zipCode" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="email">
<spring:message code="label.Email">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="email" /></td>
<td><form:errors path="email" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="confirmEmail">
<spring:message code="label.ConfirmEmail">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="confirmEmail" /></td>
<td><form:errors path="confirmEmail" /></td>
</tr>
<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="handPhone">
<spring:message code="label.HandPhone">
</form:label></td>
<td width="350px" bgcolo

tekskills 16-Apr-13 8:12am

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="homePhone">
<spring:message code="label.HomePhone">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="homePhone" /></td>
<td><form:errors path="homePhone" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="workPhone">
<spring:message code="label.WorkPhone">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="workPhone" /></td>
<td><form:errors path="workPhone" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="pagerPhone">
<spring:message code="label.PagerPhone">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="pagerPhone" /></td>
<td><form:errors path="pagerPhone" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="emergencyPhone">
<spring:message code="label.EmergencyPhone">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="emergencyPhone" /></td>
<td><form:errors path="emergencyPhone" /></td>
</tr>
<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="emergencyContactName">
<spring:message code="label.EmergencyContactName">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="emergencyContactName" /></td>
<td><form:errors path="emergencyContactName" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="emergencyContactPersonNumber">
<spring:message code="label.EmergencyContactPersonNumber">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="emergencyContactPersonNumber" /></td>
<td><form:errors path="emergencyContactPersonNumber" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="emergencyContactRelation">
<spring:message code="label.EmergencyContactRelation">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="emergencyContactRelation" /></td>
<td><form:errors path="emergencyContactRelation" /></td>
</tr>

<tr>

<td width="150px" bgcolor="#CCCCCC"><span
style="color: #ffffff; font-size: 12px;"><form:label path="image">
<spring:message code="label.Image">
</form:label></td>
<td width="350px" bgcolor="#ECE9E9"><span
style="font-size: 12px;"></span><form:input path="image" type="file" /></td>
<td><form:errors path="image" /></td>
</tr>


<

Shubhashish_Mandal 17-Apr-13 1:20am

Hi tekskills , It is very tough to predict the glitch. You have to tell us where you stuck and what error/exception you got. One more thing post your code within your main post inside <pre lang="HTML"> your code </pre> tag , so that it will be more readable.