2 つの html ファイルと 1 つの css ファイルがあります。私の質問は、私のセクションの同じページまたはウィンドウでリンク monday.html を開く方法です。つまり、mondy ナビゲーション ボタンを 1 回クリックすると、lorem ipsum が表示されているコンテンツに結果が表示されます。
/これは index.html ファイルです
<html>
<head>
<title>Navigation</title>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrap">
<h1>Welcome to My page</h1>
<div id="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis a felis. Sed ac mauris eget
eros vestibulum luctus. Phasellus ultrices consequat arcu. Aliquam rhoncus, elit nec faucibus
scelerisque, nisi ligula imperdiet dui, in lacinia nulla odio sit amet lorem. Praesent tristique,
orci ac posuere rhoncus, massa urna semper purus, et tempus justo massa a massa. Cras nec turpis
non massa lacinia facilisis. Phasellus gravida nisl eget metus. Fusce gravida, dui ac accumsan
sagittis, nisl quam interdum tortor, sed gravida risus lectus eget dui. Aliquam vitae justo ac
risus gravida convallis. Nulla quis diam a mi aliquam tempor. Duis dignissim erat vitae nisl.
Fusce vel lorem. Duis neque dolor, tempor nec, cursus id, convallis in, enim. Morbi egestas
lobortis neque.</p>
</div>
<div id="sidebar">
<h2>Weekdays</h2>
<ul>
<li><a href="monday.html">Monday</a></li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>
</div>
<div id="footer">
<p>Copyright © MyPage</p>
</div>
</div>
</body>
</html>
my css code is as follows:-
/*
Mypage css file
*/
body {
margin: 0;
padding: 0;
background: #cfcdb4;
border-top: 10px solid #bcba9e;
font-family: Helvetica, sans-serif;
color: #fff;
}
p {
margin: 0 0 10px 0;
padding: 0;
line-height: 1.2em;
}
h2 {
margin: 0;
color: #6d8ead;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#wrap {
margin: 0 auto;
width: 800px;
background: #362416;
border-left: 5px solid #281a0f;
border-right: 5px solid #281a0f;
}
#wrap h1 {
margin: 0;
padding: 10px;
text-align: center;
background: #553f2d;
border-bottom: 1px solid #362416;
color: #fff;
font-weight: normal;
font-family: Georgia, serif;
}
#content {
margin: 20px 0 0 0;
float: left;
width: 500px;
padding: 0 15px 0 15px;
}
#content h2 {
margin: 0 0 10px 0;
font-size: xx-large;
}
#sidebar {
float: right;
width: 260px;
margin: 20px 0 0 0;
}
#sidebar ul {
margin: 0 0 0 10px;
}
#sidebar ul li {
margin: 0 0 10px 0;
}
#sidebar h2 {
background: #553f2d;
margin: 0 0 10px 0;
padding: 5px;
}
#footer {
padding: 10px;
clear: both;
font-size: small;
}
#footer p {
margin: 0;
padding: 10px;
background: #281a0f;
text-align: center;
}
the hyperlink monday.html is as follows:-
<html>
<head>
<title>Monday</title>
</head>
<body>
This is a monday page
</body>
<html>