[Solved] How to make a tab (i.e. Home, About, Contact) clickable in HTML?

Question

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

Accepted Answer