How To Make A Tab (i.e. Home, About, Contact) Clickable In Html?

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

Solution 1:

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:

<divclass="row"><divid="header"class="col-xs-12"><h1>Welcome to my green world!</h1><hr /></div><divclass="col-xs-3"><ul><liid="home">HOME</li><liid="gallery">GALLERY</li><liid="about">ABOUT ME</li><liid="contact">CONTACT ME</li><liid="diary">MY DIARY</li><liid="blog">BLOG</li></ul></div><divclass="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><divclass="col-xs-9 gallery hidden"><p>This is the gallery.</p></div><divclass="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><divclass="col-xs-9 contact hidden"><p>Contact me here.</p></div><divclass="col-xs-9 diary hidden"><p>My diary will be here.</p></div><divclass="col-xs-9 blog hidden"><p>Blog posts appear here.</p></div><divid="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-3ul {
    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

Solution 2:

Alright, so here are a few techniques that could work:

if you want that paragraph to show up ONLY when they are in that section of the website (like home, about, etc), just put it in a div, and name the div what you want that paragraph to be called, example

<div id="about">
This is the about paragraph!
</div>

then go to your CSS and add this:

#about {
display: none;
}

what this will do is make it so that the web page doesn't render it at all. Ok so next you need to make your about link button (this technically isn't a link though, your just rendering and hiding a div). Once you find your button add this code somewhere in the tag

onclick="showabout()"

this will make it so that when they click this button it will run this showabout() function in your javascript:

functionshowabout() {
//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";
}

so then just list your paragraphs in your HTML like so:

<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)

and that's it! Your code will swap out the paragraphs for you!

If you don't want to do it that way you could simply just make several different pages and then make hyperlinks between them... Which honestly I don't understand why you don't just want to do it that way, its normally a lot easier and looks just as good.

If you don't want to do it that way you could put an IFrame in your website and just have them as separate pages but then show the iFrame below, but Iframes are kinda hated by search engines so its going to really hurt you if you want your page high on the search results....

If you still don't want to do it that way don't fear, there is an actual language that is programmed to do what you want to do, its called Meteor.js. You would also have to use iron-router though, and that means you are going to also need to install meteorite.

Concerning your paragraph that keeps moving when you change your screen size. I faced this problem a lot before I knew the simple answer, which is:

1) Use Floating (a css property to push the div or element as far to one horizontal direction as possible)

2) Don't use px in css, use %! This way your paragraphs change when your screen size changes. (% or percent is a measurement based of the screen size, so 20% is 20% of the screen size)

3) If you don't want it to move at all, use CSS Position Property!

Best of luck!!!