在行中单击导航按钮更改内容

时间:2013-11-18 11:42:53

标签: javascript jquery html css

我想通过点击导航栏中的标签来更改行的内容。该行将是静态的,但内容应该更改。当我点击导航栏链接时,顶部标题“ASSOCIATE SOFTWARE ENGINEER PROGRAM”下面的内容应该会改变。

我需要有关如何将导航栏链接到内容的帮助。单击导航栏链接时,行中的内容应该移动。默认视图为“关于”。当我点击“Get Involved”时,包含图片和文字的行中的内容应该更改为其他相关内容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.ms-quicklaunchheader {
    display:none;
}

.ms-recyclebin{
    display:none;
}

.ms-sitetitle {
    display:none;
}
p.wide-tracking { letter-spacing: 0.3em }
</style>
</head>

<body>
<CENTER>
<TABLE width="640" align="center" style="LINE-HEIGHT: normal; FONT-STYLE: normal; WIDTH: 10px; FONT-SIZE: medium; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif;" summary="">
<TBODY>
<TR>
<TD vAlign=bottom colSpan=6 align=center><IMG style="BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; WIDTH: 650px; BORDER-TOP: 0px solid; BORDER-RIGHT: 0px solid" border=0 src="https://km.ca.com/rnd/vitality/ase/images1/ASE_top_banner.jpg" useMap=#bannermap></TD><MAP name=bannermap><AREA href="#" shape=rect alt="Event Tools" coords=521,89,634,121><AREA href="#" shape=rect alt="Events" coords=410,88,519,123><AREA href="#" shape=rect alt="Get Involved" coords=298,89,407,122><AREA href="#" shape=rect alt="About Us" coords=183,89,297,124></MAP></TR>
<TR>
<TD colSpan=6 align=middle>
<P align=center><FONT style="letter-spacing: 0.07em" size=6 face="CA Sans">ASSOCIATE SOFTWARE ENGINEER PROGRAM</FONT></P></TD></TR></TBODY>
<TBODY>
<TR>
<TD height=5 colSpan=6>&nbsp;</TD></TR>
<TR>
<TD height=2 colSpan=3 align="center"><IMG style="BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; WIDTH: 310px; HEIGHT: 193px; BORDER-TOP: 0px solid; BORDER-RIGHT: 0px solid" border=0 src="https://km.ca.com/rnd/vitality/ase/images1/iPad.jpg"></TD>
<TD height=2 colSpan="3" align="left"><strong><FONT color=#95A0A8 size=3 face=Calibri>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</FONT></strong></TD></TR>
<TR>
<TD height=20 colSpan=6>
<HR style="HEIGHT: 1px" class=style2></TD></TR></TBODY>
<TBODY>
<TR>
<TD vAlign=middle rowSpan=2 colSpan=2 align=left>
<IMG style="BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; WIDTH: 216px; HEIGHT: 162px; BORDER-TOP: 0px solid; BORDER-RIGHT: 0px solid" border=0 src="https://km.ca.com/rnd/vitality/ase/images1/Map.jpg"></TD>
<TD vAlign="middle" rowSpan=2 colSpan=2 align=center>
<P align=center><IMG style="BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; WIDTH: 216px; HEIGHT: 162px; BORDER-TOP: 0px solid; BORDER-RIGHT: 0px solid" border=0 src="https://km.ca.com/rnd/vitality/ase/images1/Demo1.jpg"></P></TD>
<TD rowspan="2" vAlign="middle" colSpan=2 align=right><IMG style="BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; WIDTH: 216px; HEIGHT: 162px; BORDER-TOP: 0px solid; BORDER-RIGHT: 0px solid" border=0 src="https://km.ca.com/rnd/vitality/ase/images1/tab3.jpg" width="216" height="162" usemap="#rowmap"/>
  <map name="rowmap">
  <area shape="rect" coords="22,97,156,113" href="www.thehub.ca.com">
  <area shape="rect" coords="22,45,155,61" href="www.thehub.ca.com">
  <area shape="rect" coords="22,11,155,27" href="www.thehub.ca.com">
  <area shape="rect" coords="22,29,155,45" href="www.thehub.ca.com">
  <area shape="rect" coords="22,63,155,79" href="www.thehub.ca.com">
  <area shape="rect" coords="22,80,157,96" alt="Venus" href="www.thehub.ca.com">
</map></TD>
</tr>
<tr>
<TD height=20 rowspan="2" vAlign=center colSpan=6 align=middle>
</td>
</tr>
<tr>
<TD height=20 vAlign=center colSpan=6 align=middle>
<HR style="HEIGHT: 1px" class=style2>
</td>
</tr>
<TR>
<TD width="98%" colSpan=6 align="left">
<P><FONT size="5" color=#e98300 face="Calibri">"The ASE program hust had a great vibe. The instructors were excellent. Everyone from CA was deeply dedicated to the program and our projects. And these weren't school projects-my team did real work for an actual CA product. At the end we presented our projects to several VPs. It was an awesome program. I only wish it was longer."</FONT></FONT></P>
<P align=right><STRONG>Justin Hegedus</STRONG><BR>Associate Engineer<BR>CA Technologies</P></TD></TR>
<TR>
<TD height=20 vAlign=center colSpan=6 align=middle>
<HR style="HEIGHT: 1px" class=style2>
</TD></TR>
<TR>
<TD colSpan=6>
<P align=left><FONT size=3 face=Calibri><STRONG>Legacy ASE Site Content (Temporary).</STRONG></FONT></P>
<P align=left><FONT face=Calibri><A title="" href="https://km.ca.com/rnd/vitality/ase/Distributed/Forms/AllItems.aspx" target=_blank>Distributed</A> <BR><A title="" href="https://km.ca.com/rnd/vitality/ase/Mainframe/Forms/AllItems.aspx" target=_blank>Mainframe <BR></A><A title="" href="https://km.ca.com/rnd/vitality/ase/General/Forms/AllItems.aspx" target=_blank>General <BR></A><A title="" href="https://km.ca.com/rnd/vitality/ase/Shared%20Documents/Forms/AllItems.aspx" target=_blank>Shared Documents</A></FONT></P></TD></TR>
</TBODY>
</TABLE></CENTER>
</body>
</html>

0 个答案:

没有答案