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

All 2 Replies

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>

Javascript Tab

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers