我想让我的菜单按钮可点击，以便导航到所需的部分或带有其他内容的其他页面。例如，在我的网站上，我有一个菜单＆＃34;关于我＆＃34;。我希望一旦用户点击它就应该能够看到关于＆＃34;关于我＆＃34;我存储在我的HTML文件中。
我还有另一个问题，那就是当我将窗口大小缩小时，段落文本会移动到不需要的位置（在我的情况下，在菜单区域下方）。否则，在全尺寸的窗户中它很好。
我将我的javascript课程留空，因为我还没有任何.js功能。
我的代码：
main.html中：
<!--
All the html code will go in this file. This is the main core file of any website.
Some php code may be included if necessary.
-->
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<!--<img src="bricks.JPG" alt="blue bricks" width="300" height="1000">-->
<style type="text/css">
<!--right now nothing to do here-->
</style>
</head>
<body>
<h1 id="style_header">Welcome to my green world!</h1></div>
<div id="menu_area" >
<div id="home">HOME</div><br /><br /><br />
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />
</div>
<!-- I want to call the home.html class here so that the paragraph is shown in my homepage under the home menu.-->
<p id="paragraph_home"><b>
Thank you for spending your time to visit my website.
My name is Jabir Al Fatah. I live in Sweden. I have
a lot of interest in web developing and 3d graphics
designing. I am a travel addicted guy. I love to travel and
have experience about diversity among life and nature.
I am passionate. I don't do everything just becuase I
am obliged to do,rather I like to take risk to be done
with something just because I like.I haven't have a
wonderful childhood in my life. But I admit it that my
parents were surprisingly aware of my future and even
every singlestep in my life. Their love and affection
fulfilled all of my demand.Well, I just admired them a
little. There are tons of others stuff I can say.
However, in my life, changes happen very fast.
</b></p>
<p id="paragraph_aboutme">This paragraph should appear while clicking on "About me". Beisides,
it's not accurately placed in the window. I need to fix that
.Another problem is that this paragraph moves under the menu area by
pushing it up when I make the window size smaller. </p>
<div id="footer">Developed by Jabir Al Fatah</div>
</body>
</html>
main_design.css：
/*
All the css properties will go in this file. CSS properties design the site to look it prettier.
*/
#style_header {
background-color:blue;
text-align:center;
padding:20px;
margin:-8px;
border:4px solid red;
}
#paragraph_home{
text-align:center;
display:inline-block;
width:300px;
vertical-align:top;
font-family:verdana;
color:blue;
size:20px;
margin:9px;
}
#paragraph_aboutme {
text-align:center;
display:inline-block;
width:200px;
vertical-align:bottom;
font-family:verdana;
color:blue;
size:20px;
margin:9px;
}
#menu_area {
border:4px solid red;
margin:-8px;
background-color:#FFD700;
padding-top:30px;
margin-top:4px;
height:600px;
width:150px;
display:inline-block;
vertical-align:top;
}
body {
background-image:url(green.JPG);
background-repeat:no-repeat;
}
#footer {
background-color:gray;
margin:-8px;
margin-top:6px;
border:2px solid green;
text-align:center;
/*margin-bottom:-20px;*/
width:99.6%;
position:absolute;
}
#home {
font:bold 20px Tahoma;
text-align:left;
}
#about_me {
font:bold 20px Tahoma;
text-align:left;
}
#gallery {
font:bold 20px Tahoma;
text-align:left;
}
#contact_me {
font:bold 20px Tahoma;
text-align:left;
}
#my_diary {
font:bold 20px Tahoma;
text-align:left;
}
#blog {
font:bold 20px Tahoma;
text-align:left;
}
main_interaction.js：
/*
All the java script code will go in this file. This class will add all the interaction and behaviour functionality for
the website.
*/
答案 0 :(得分：0)
这基本上是你想要的。
请注意，我使用Bootstrap作为CSS框架，这使得创建像你的布局更容易。我冒昧地从头开始构建你的布局，没有任何特殊的颜色。
DEMO：JSFiddle
<强> HTML：
<div class="row">
<div id="header" class="col-xs-12">
<h1>Welcome to my green world!</h1>
<hr />
</div>
<div class="col-xs-3">
<ul>
<li id="home">HOME</li>
<li id="gallery">GALLERY</li>
<li id="about">ABOUT ME</li>
<li id="contact">CONTACT ME</li>
<li id="diary">MY DIARY</li>
<li id="blog">BLOG</li>
</ul>
</div>
<div class="col-xs-9 home">
<p>Thank you for spending your time to visit my website. My name is Jabir Al Fatah. I live in Sweden. I have a lot of interest in web developing and 3d graphics designing. I am a travel addicted guy. I love to travel and have experience about diversity among life and nature. I am passionate. I don't do everything just becuase I am obliged to do,rather I like to take risk to be done with something just because I like.I haven't have a wonderful childhood in my life. But I admit it that my parents were surprisingly aware of my future and even every singlestep in my life. Their love and affection fulfilled all of my demand.Well, I just admired them a little. There are tons of others stuff I can say. However, in my life, changes happen very fast.</p>
</div>
<div class="col-xs-9 gallery hidden">
<p>This is the gallery.</p>
</div>
<div class="col-xs-9 about hidden">
<p>This paragraph should appear while clicking on "About me". Beisides, it's not accurately placed in the window. I need to fix that .Another problem is that this paragraph moves under the menu area by pushing it up when I make the window size smaller.</p>
</div>
<div class="col-xs-9 contact hidden">
<p>Contact me here.</p>
</div>
<div class="col-xs-9 diary hidden">
<p>My diary will be here.</p>
</div>
<div class="col-xs-9 blog hidden">
<p>Blog posts appear here.</p>
</div>
<div id="footer" class="col-xs-12">
Developed by Jabir Al Fatah</div>
</div>
<强> CSS：
.row {
margin: 0;
}
#header {
text-align: center;
padding: 20px;
}
.col-xs-9 {
font-family:'Verdana';
font-size: 13pt;
}
.col-xs-3 {
border-right: 1px solid #DDD;
line-height: 40pt;
font-family:'Tahoma';
font-size: 15pt;
font-weight: bold;
margin: 0;
padding: 0;
}
.col-xs-3 ul {
list-style-type: none;
}
#footer {
border-top: 1px solid #DDD;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
padding: 5px;
}
li:hover {
cursor: pointer;
text-decoration: underline;
}
<强> JS：
$("li").on('click', function () {
$(".col-xs-9").addClass("hidden");
$("." + $(this).attr("id")).removeClass("hidden");
});
如果您坚持使用与之相同的颜色，请使用以下链接：JSFiddle
答案 1 :(得分：0)
好的，所以这里有一些可行的技术：
如果你想让那个段落只出现在网站的那个部分（比如home，about等），只需把它放在一个div中，然后将div命名为你想要调用的段落，示例
<div id="about">
This is the about paragraph!
</div>
然后转到CSS并添加：
#about {
display: none;
}
这样做是为了使网页根本不呈现它。
好的，接下来你需要制作一个关于链接的按钮（这在技术上不是一个链接，你只是渲染和隐藏一个div）。找到按钮后，在标签
onclick="showabout()"
这将使它们在单击此按钮时将运行此showabout（）函数 在你的javascript：
function showabout() {
//THIS CODE HIDES ALL OF THE OTHER DIVS \/ \/ \/
document.getElementById("home").style.display = "none";
document.getElementById("Gallery").style.dispaly = "none";
//FOR EACH PARAGRAPH ADD ONE OF THE ABOVE LINES OF CODE AND SIMPLY CHANGE THE ID, LIKE HOME, OR GALLERY, ETC
//THIS LINE OF CODE BELOW THEN SHOWS THE PARAGRAPH \/ \/ \/
document.getElementById("about").style.display = "block";
}
然后只需在HTML中列出您的段落：
<div id="home">This is the Home paragraph!</div>
<div id="about">This is the About paragraph!</div>
<div id="gallery">This is the Gallery paragraph!</div>
(Etc)
那就是它！您的代码将为您换出段落！
如果你不想这样做，你可以简单地制作几个不同的页面，然后在它们之间建立超链接......老实说，我不明白你为什么不这样做我希望这样做，通常更容易，看起来也一样好。
如果您不想这样做，可以在您的网站上放置一个IFrame，然后将它们作为单独的页面显示，然后在下面显示iFrame，但是iframe有点讨厌搜索引擎如果你希望你的页面在搜索结果中占据优势，那么它真的会伤到你....
如果你仍然不想这样做，不要害怕，有一种实际的语言被编程为做你想做的事情，它被称为{{3} }。你也必须使用铁路由器，这意味着你还需要安装陨石。
关于在更改屏幕尺寸时保持移动的段落。在我知道简单的答案之前，我经常遇到这个问题：
1）使用Meteor.js（一个css属性将div或元素尽可能地推到一个水平方向）
2）不要在css中使用px，使用％！通过这种方式，当您的屏幕尺寸发生变化（％或百分比是基于屏幕尺寸的测量值，因此20％是屏幕尺寸的20％）
3）如果您根本不想让它移动，请使用Floating！
祝你好运！