I am using two frames,
left side frame, i am having four links...
"
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<meta name="robots" content="noindex,nofollow" />
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/reset.css" /> <!-- RESET -->
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" /> <!-- MAIN STYLE SHEET -->
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/2col.css" title="2col" /> <!-- DEFAULT: 2 COLUMNS -->
<link rel="alternate stylesheet" media="screen,projection" type="text/css" href="css/1col.css" title="1col" /> <!-- ALTERNATE: 1 COLUMN -->
<!--[if lte IE 6]><link rel="stylesheet" media="screen,projection" type="text/css" href="css/main-ie6.css" /><![endif]--> <!-- MSIE6 -->
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/style.css" /> <!-- GRAPHIC THEME -->
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/mystyle.css" /> <!-- WRITE YOUR CSS CODE HERE -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tabs > ul").tabs();
});
</script>
<title>Dashboard</title>
</head>
<body>
<div id="main">
<!-- Tray -->
<div id="tray" class="box">
<p class="cloudlogo"></p>
<p class="f-right">User: <strong><a href="#">Administrator</a></strong> <strong><a href="#" id="logout">Log out</a></strong></p>
</div> <!-- /tray -->
<hr class="noscreen" />
<!-- /header -->
<hr class="noscreen" />
<!-- Columns -->
<div id="cols" class="box">
<!-- Aside (Left Column) -->
<div id="aside" class="box">
<ul class="box">
<li id="submenu-active"><a href="#">Link1</a> <!-- Active --> </li>
<li id="submenu-active"><a href="#">Link2</a></li>
<li id="submenu-active"><a href="#">Link3</a></li>
<li id="submenu-active"><a href="#">Link4</a></li>
</ul>
</div> <!-- /aside -->
<hr class="noscreen" />
<!-- Content (Right Column) -->
<div id="content" class="box">
<h1>Styles</h1>
<!-- System Messages -->
<h3 class="tit">System Messages</h3>
<p class="msg warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="msg info">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="msg done">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="msg error">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> <!-- /content -->
</div> <!-- /cols -->
<hr class="noscreen" />
<!-- Footer -->
<div id="footer" class="box">
<p class="f-left">© 2009 <a href="#">Your Company</a>, All Rights Reserved ®</p>
</div> <!-- /footer -->
</div> <!-- /main -->
</body>
</html>
"
On click of link1, a div should display inside the "content".
On click of link2, another div should display inside the "content".
Like this for all link, separate div should be displayed.
Please help me.!
Thanks in adv.!