I am currently working on a website project that features three links in the side bar named Story 1, Story 2, and Story 3. I would like to implement a feature where clicking on any of these links will display the corresponding content in the main blue division (main1). How can I achieve this functionality?
<style>
#wrapper{
color:#FF00FF;
margin:0px auto;
padding:0px;
width:1050px;
height 1000px;
}
#header
{
margin:0px;
padding:0px;
width:1000px;
height:100px;
background-color:#F74E84;
}
#content
{
margin:0px;
padding:0px;
width:1000px;
}
#side
{
border-right:dashed;
border-right-color:#F74E84;
margin:0px;
padding:0px;
width:247px;
height:700px;
background-color:#F7C9D8;
float:left;
}
#side ul { list-style-type: none; }
#side a { text-decoration:none;
color:black;}
#main
{
background-color:red;
margin:0px;
padding:0px;
width:750px;
height:700px;
float:right;
}
#main1
{
margin:0px;
padding:0px;
width:750px;
height:650px;
background-color:#DFE4E9;
float:right;
}
#footer
{
margin:0px;
padding:0px;
width:750px;
height:50px;
background-color:#F74E84;
float: right;
}
</style>
<div id="wrapper">
<div id="header"> Header </div>
<div id="content">
<div id="side"><p>Here is navigation</p>
<ul>
<li><a href="text.html">Story 1</a></li>
<li><a href="Second.html">Story 2</a></li>
<li><a href="Third.html">Story 3</a></li>
</ul></div>
<div id="main">
<div id="main1">
<p>This is my web site </p>
</div>
<div id="footer">Footer</div>
</div>
</div>
</div>