如何制作可在HTML中点击的标签（即主页，关于，联系人）？ [英] How to make a tab (i.e. Home, About, Contact) clickable in HTML?

问题描述

我想让我的菜单按钮可点击，以便导航到所需的部分或另一个页面与另一个内容。例如在我的网站上，我有一个菜单关于我。我希望一旦用户点击它，应该能够看到我存储在HTML文件中的关于关于我的段落。

我还有一个问题那就是当我缩小窗口大小时，段落文本移动到不需要的位置（在我的情况下菜单区域下方）。否则，在全尺寸的窗口中就没事了。

我将我的javascript类留空，因为我还没有需要任何.js功能。

我的代码：

main.html：

 <！ -  
所有html代码都将放在此文件中。这是任何网站的主要核心文件。 
如有必要，可能会包含一些php代码。 
  - > 
<！DOCTYPE html> 
< html> 
< head> 
< html lang =en> 
< html charset =utf-8> 
< title>欢迎来到法塔赫的世界！< / title> 
< link rel =stylesheethref =main_design.css/> 
 
 
 
 <！ -   -  < style type =text / css> 
 <！ - 现在没有什么可以做的 - > 
< / style> 
< / head> 
 
< body> 
 
 
< h1 id =style_header>欢迎来到我的绿色世界！< / h1>< / div> 
 
 
< div id =menu_area> 
 
 
< div id =home> HOME< / div>< br />< br />< br /> 
< div id =about_me>关于我< / div>< br />< br /> < br /> 
< div id =gallery> GALLERY< / div>< br />< br /> < br /> 
< div id =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> 
 
 
 <！ - 我想在此调用home.html类，以便该段落显示在我的主页下的主菜单中.--> 
< p id =paragraph_home>< b> 
感谢您花时间访问我的网站。 
我的名字是Jabir Al Fatah。我住在瑞典。我有
对网页开发和3D图形
设计感兴趣。我是一个旅游上瘾的家伙。我喜欢旅行，
有关于生活和自然多样性的经验。 
我充满激情。我不会做任何事情，只是因为我
有义务这样做，而我喜欢冒险做一些事情，只是因为我喜欢。$我没有
美妙的童年在我生命中。但我承认，我的
父母惊人地意识到我的未来，甚至在我生命中每一步都有单身。他们的爱和感情
满足了我的所有需求。我只是羡慕他们
一点。还有很多我可以说的其他东西。 
然而，在我的生活中，变化发生得非常快。 
< / b>< / p> 
 
< p id =paragraph_aboutme>在点击关于我时应显示此段。 Beisides，
不准确放置在窗口中。我需要修复
。另一个问题是，当我将窗口大小缩小时，此段落在
菜单区域内移动。 < / p为H. 
 
 
< div id =footer>由Jabir Al Fatah开发< / div> 
 
< / body> 
< / html> 
  

main_design.css：

  / * 
所有的css属性都会在这个文件中。 CSS属性设计的网站看起来更漂亮。 
 * / 
 #style_header {
 background-color：blue; 
 text-align：center; 
 padding：20px; 
 margin：-8px; 
 border：4px纯红色; 
} 
 
 #paragraph_home {
 text-align：center; 
 display：inline-block; 
 width：300px; 
 vertical-align：top; 
 font-family：verdana; 
颜色：蓝色; 
 size：20px; 
 margin：9px; 
} 
 #paragraph_aboutme {
 text-align：center; 
 display：inline-block; 
 width：200px; 
 vertical-align：bottom; 
 font-family：verdana; 
颜色：蓝色; 
 size：20px; 
 margin：9px; 
} 
 
 #menu_area {
 border：4px纯红色; 
 margin：-8px; 
背景颜色：＃FFD700; 
 padding-top：30px; 
 margin-top：4px; 
身高：600px; 
 width：150px; 
 display：inline-block; 
 vertical-align：top; 
} 
 body {
 background-image：url（green.JPG）; 
背景重复：不重复; 
} 
 #footer {
 background-color：grey; 
 margin：-8px; 
 margin-top：6px; 
 border：2px纯绿色; 
 text-align：center; 
 / * margin-bottom：-20px; * / 
 width：99.6％; 
位置：绝对; 
 
 
 
} 
 #home {
字体：粗体20px Tahoma; 
 text-align：left; 
} 
 #about_me {
字体：粗体20px Tahoma; 
 text-align：left; 
} 
 #gallery {
字体：粗体20px Tahoma; 
 text-align：left; 
} 
 #contact_me {
字体：粗体20px Tahoma; 
 text-align：left; 
} 
 #my_diary {
字体：粗体20px Tahoma; 
 text-align：left; 
} 
 #blog {
字体：粗体20px Tahoma; 
 text-align：left; 
 
  

main_interaction.js：

  / * 
所有的java脚本代码都会放在这个文件中。该课程将为网站
添加所有交互和行为功能。 
 * / 
  

解决方案

。

请注意，我使用 Bootstrap 作为CSS框架，这使得它更容易创建像你的布局。我冒昧地从头开始建立你的布局，没有任何特殊的颜色。

DEMO： JSFiddle b b

 < div class =row> 
< div id =headerclass =col-xs-12> 
< h1>欢迎来到我的绿色世界！< / h1> 
 
< hr /> 
< / div> 
< div class =col-xs-3> 
< ul> 
< li id =home>主页< / li> 
< li id =gallery> GALLERY< / li> 
< li id =about>关于我< / li> 
< li id =contact>联系我< / li> 
< li id =diary> MY DIARY< / li> 
< li id =blog> BLOG< / li> 
< / ul> 
< / div> 
< div class =col-xs-9 home> 
< p>感谢您花时间访问我的网站。我的名字是贾比尔法塔赫。我住在瑞典。我对网页开发和3D图形设计有很多兴趣。我是一个旅游上瘾的家伙。我喜欢旅行，并有关于生活和自然多样性的经验。我充满激情。我没有做任何事情，只是因为我有责任去做，而是因为我喜欢冒险做某些事情。我的人生没有一个美好的童年。但我承认，我的父母惊奇地意识到我的未来，甚至是我生命中的每一个单步。他们的爱和感情满足了我的所有需求。我只是对他们很敬佩。还有很多我可以说的其他东西。然而，在我的生活中，变化发生得非常快。< / p> 
< / div> 
< div class =col-xs-9 gallery hidden> 
< p>这是图库。< / p> 
< / div> 
< div class =col-xs-9 about hidden> 
< p>单击关于我时应显示此段。 Beisides，它没有准确地放在窗户里。我需要解决这个问题。另一个问题是，当我缩小窗口大小时，此段落会在菜单区域下移动。< / p> 
< / div> 
< div class =col-xs-9 contact hidden> 
< p>请在此与我联系。< / p> 
< / div> 
< div class =col-xs-9 diary hidden> 
< p>我的日记将会在这里。< / p> 
< / div> 
< div class =col-xs-9 blog hidden> 
< p>博客帖子出现在这里。< / p> 
< / div> 
< div id =footerclass =col-xs-12> 
由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; 
保证金：0; 
填充：0; 
} 
 .col-xs-3 ul {
 list-style-type：none; 
} 
 #footer {
 border-top：1px solid #DDD; 
 text-align：center; 
位置：绝对; 
底部：0; 
剩下：0; 
 padding：5px; 
} 
 li：hover {
 cursor：pointer; 
 text-decoration：underline; 
 
  

JS：

$ b $ （'click'，function（）{
$（。col-xs-9）。b

  $（li）。 addClass（hidden）; 
 $（。+ $（this）.attr（id））。removeClass（hidden）; 
}）; 
  

如果您坚持使用相同的颜色，请使用以下链接： JSFiddle

I want to make my menu button clickable so that it navigates to the desired section or another page with another content. For example in my website I have a menu "About me". I want that as soon as an user clicks on it should be able to see the paragraph about "ABOUT ME" which I stored in my HTML file.

I have another problem and that is when I make the window size smaller the paragraph text moves into unwanted position (in my case below menu area). Otherwise, in full sized window it's fine.

I left my javascript class empty because I haven't needed any .js functinality yet.

My code:

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.
*/

解决方案

Here's basically what you want.
Do note that I used Bootstrap as a CSS framework, which makes it alot easier to create lay-outs like yours. I took the liberty to build your lay-out from the ground up, without any special colors.

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");
});

If you insist on having about the same colors you used back, then use this link: JSFiddle

这篇关于如何制作可在HTML中点击的标签（即主页，关于，联系人）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！