Javascript Tab

Question

seniya 0 Newbie Poster

15 Years Ago

I am not experienced with javascript.I made a from with tabs.When i Click on order tab regorder.jsp in not coming.here is my codes.

<div class="Tabs" style="width: 500px;">
<a style="color:blue;"><font face="times">Order Form</font></a>
<a style="color:blue;"><font face="times">Accounting</font></a>
<a style="color:blue;"><font face="times">Services</font></a>
<a style="color:blue;"><font face="times">Members</font></a>
</div>

Is it correct.Could anyone help me to solve this problem.

javascript

2 Contributors
2 Replies
137 Views
23 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by seniya

Luckychap 68 Posting Pro in Training

15 Years Ago

Where is your CSS. And where is your onClick event. And where is the handler. And where u r deciding to put the code to display your hidden divs.

And last but not the least where are CODE TAGS

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

seniya 0 Newbie Poster · Answer 1 · 2008-12-17T11:27:46+00:00

tabview.css

div.TabView div.Tabs
{
  height: 22px;
background: url('tab-view.png')  repeat-x 0px -72px;
 
}

div.TabView div.Tabs a
{
  display: block;
  float:    left;

  margin-right: 10px;

  width: 100px;
  text-align: center;

  height:      22px;
  line-height: 21px;
  vertical-align: middle;

 background: url('tab-view.png') no-repeat 0px   0px;

  text-decoration: none;
  font-weight: 900;
  color:   #004040;
  cursor:  pointer;
}

div.TabView div.Tabs a:hover
{
 background: url('tab-view.png') no-repeat 0px -35px;
}

div.TabView div.Tabs a.Current,
div.TabView div.Tabs a.Current:hover
{
  margin-top: 01px;
  height:     21px;
  background: url('tab-view.png') no-repeat 0px   0px;
  cursor:  default;
}




div.TabView div.Pages
{
  clear: both;

  border: 1px solid #404040;
  border-top: none;

  background: #FCFCFC;
}

div.TabView div.Pages                  { overflow: hidden; }
div.TabView div.Pages div.Page         { overflow:   auto; }
div.TabView div.Pages div.Page div.Pad { padding: 7px 7px; }

here is the tabview

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MSTG - Order Details</title>

<link rel="stylesheet" type="text/css" href="tab-view.css" />

</head>

<body  id="myreg" bgcolor="white">
<table>
<tr>
<td>
<img src="images/title.bmp">
</td>
</tr>
<tr>
<td>
<jsp:include page="cont1.html"/>
</td>
</tr>
</table>
<div class="TabView" id="TabView"  >

<div class="Tabs" style="width: 500px;">
  <a style="color:blue;"><font face="times">Order Form</font></a>   
  <a style="color:blue;"><font face="times">Accounting</font></a>
  <a style="color:blue;"><font face="times">Services</font></a>
  <a style="color:blue;"><font face="times">Members</font></a>
</div>




<div class="Pages" style="color:blue; width: 900px; height: 1300px;">
  
  <div class="Page" style="display:  block;"><div class="Pad">
  	<jsp:include page="regorder.jsp" />
  </div></div>
  </jsp:include>

  <div class="Page" style="display:  none;"><div class="Pad">
  <jsp:include page="regaccount.jsp" />
    </jsp:include>
  </div></div>
  
  <div class="Page" style="display:  none;"><div class="Pad">
  <jsp:include page="services.jsp" />
  </div></div>
    </jsp:include>
  <div class="Page" style="display:  none;"><div class="Pad">
  <jsp:include page="regmembers.jsp"/>
  </div></div>
    </jsp:include>
</div>


</div>

<script type="text/javascript" src="tab-view.js"></script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>



</body>
</html>