I have a simple webpage with few tabs and each tab has a paragraph (or <div>).
The page should show the corresponding paragraph by clicking those tabs. But whichever tab I click on it shows me all the paragraphs under another tab. For example if I click on 'Contact' tab, it shows the paragraph under 'Who I'm', ' Fatah's Blog' as well.
[NOTE: is it a good practice showing a section of the same page, what I am doing?]
My code:
.PHP file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fatah's Homepage</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="design.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
<header id="top_header" >
<h1>Welcome to my world!</h1>
<div id="style_slogan">
<h1 id="header_slogan"><i>Raise your hand, Make A change</i></h1>
</div>
</header>
<div id="giant_wrapper">
<div id="top_menu">
<ul>
<li><a href="#home"><div id="rollover_box_home"><p id="text_shadow_home">HOME</p></div></a></li>
<li><a href="#who_im"><div id="rollover_box_who_im">WHO I'M</div></a></li>
<li><a href="#gallery"><div id="rollover_box_gallery">GALLERY</div></a></li>
<li><a href="#diary"><div id="rollover_box_diary">MY DIARY</div></a></li>
<li><a href="#blog"><div id="rollover_box_blog">FATAH'S BLOG</div></a></li>
<li><a href="#contact"><div id="rollover_box_contact">CONTACT ME</div></a></li>
</ul>
</div>
<div id="new_div">
<section id="main_section">
<!--This div section is for main contaents for my website. All the correcponding
text and paragraph will be added here-->
<div id="all_contents">
<div id="home">
<i><b><p id="hello_and_welcome"><br />Hello & Welcome to my personal homepage!</p><br /> <br />
</b>
<p id="make_it_oblique"><b>"I know I am not one of the best enthusiastic ever, but I care what I love and I make things happen
what I do care to be happened."</b></p>
<br />
<br />
</i>
</div>
<div id="who_im">
<p><i><b>
BACKGROUND:
<br /><br />
My name is Jabir Al Fatah and I was born in a small country of South Asia.</b>
I grew up in our sweet little small village. I call the village Green Heaven.
My father was a teacher. I was the fourth child of my parents.
My mother was an ordinary housewife. But she wasn't just an ordinary mother.
She cherished her passion to love and care us.
I started my elementary school in the nearest village.
At the age of 18 I had to move into Europe. That probably opened a new era for me
and taught me to turn around. I turned around and that results me what I'm today.
<br /><br />
<b>LITTLE MORE ABOUT ME:<b>
<br /><br />
<br /><br />
</i></p>
</div>
<div id="gallery">
<p>It's Gallery.</p>
</div>
<div id="diary">
<p> It's diary.</p>
</div>
<div id="blog">
<p> It's my blog.</p>
</div>
<div id="contact">
<p> contact info.</p>
</div>
</div>
</section>
</div>
</div>
<footer id="the_footer">
Developed by Jabir Al Fatah 2014
</footer>
</div>
<script type="text/javascript" src="js/scripting.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
</body>
</html>
.CSS file:
/*This css property will fully be functional only in google chrome and mozila. In other browser, it will work fine but some effect
may not be shown.*/
/*@import url('http://getbootstrap.com/dist/css/bootstrap.css');*/
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
font-size:27px;
}
#header_slogan{
font-size:22px;
color:#CCFF00;
font: bold 22px Comic Sans;
}
#rollover_box_home{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
-moz-border-radius:10px;
-moz-box-shadow:rgb(110, 110, 110) 5px 5px inset;
transform:scale(1.1);
-moz-transform:scale(1.1);
-moz-transition:-moz-transform 1s;
}
#rollover_box_home:hover{
-webkit-transform:rotate(7deg);
transform:rotate(7deg);
-moz-transform:rotate(7deg);
}
#rollover_box_who_im{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
-moz-border-radius:10px;
-moz-box-shadow:rgb(110, 110, 110) 5px 5px inset;
transform:scale(1.1);
-moz-transform:scale(1.1);
-moz-transition:-moz-transform 1s;
}
#rollover_box_who_im:hover{
-webkit-transform:rotate(7deg);
transform:rotate(7deg);
-moz-transform:rotate(7deg);
}
#rollover_box_gallery{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
-moz-border-radius:10px;
-moz-box-shadow:rgb(110, 110, 110) 5px 5px inset;
transform:scale(1.1);
-moz-transform:scale(1.1);
-moz-transition:-moz-transform 1s;
}
#rollover_box_gallery:hover{
-webkit-transform:rotate(7deg);
transform:rotate(7deg);
-moz-transform:rotate(7deg);
}
#rollover_box_diary{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
-moz-border-radius:10px;
-moz-box-shadow:rgb(110, 110, 110) 5px 5px inset;
transform:scale(1.1);
-moz-transform:scale(1.1);
-moz-transition:-moz-transform 1s;
}
#rollover_box_diary:hover{
-webkit-transform:rotate(7deg);
transform:rotate(7deg);
-moz-transform:rotate(7deg);
}
#rollover_box_blog{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
-moz-border-radius:10px;
-moz-box-shadow:rgb(110, 110, 110) 5px 5px inset;
transform:scale(1.1);
-moz-transform:scale(1.1);
-moz-transition:-moz-transform 1s;
}
#rollover_box_blog:hover{
-webkit-transform:rotate(7deg);
transform:rotate(7deg);
-moz-transform:rotate(7deg);
}
#rollover_box_contact{
display:block;
border:3px solid blue;
background:orange;
padding:2px;
border-radius:10px;
-webkit-border-radius:10px;
-webkit-box-shadow:rgb(110, 110, 110) 5px 5px inset;
-webkit-transform:scale(1.1);
-webkit-transition:-webkit-transform 1s;
-moz-border-radius:10px;
-moz-box-shadow:rgb(110, 110, 110) 5px 5px inset;
transform:scale(1.1);
-moz-transform:scale(1.1);
-moz-transition:-moz-transform 1s;
}
#rollover_box_contact:hover{
-webkit-transform:rotate(7deg);
transform:rotate(7deg);
-moz-transform:rotate(7deg);
}
#text_shadow_home{
text-shadow:rgb(110,110,110) 3px 3px 5px;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer, aside, nav, article, hgroup{
display:block;
}
body{
width:100%;
-webkit-box-pack:center;
/*background-color:#003300;*/
background-image:url(background.JPG);
}
#wrapper{
max-width:1000px;
margin:20px auto;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex:1;
}
#top_header{
background:green;
border:3px solid orange;
padding:20px;
text-align:center;
}
#top_menu{
background:black;
color:white;
border:3px solid #FF0000 ;
padding:4px;
text-align:center;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
-webkit-box-flex:1;
margin:20px;
padding:20px;
background:#996600
}
#the_footer{
color:black;
text-align:center;
padding:20px;
border-top: 2px solid red;
background-color:gray;
}
#all_contents >div {
display:none;
}
#all_contents{
background-color:#00FFFF;
border:10px solid #0000FF;
padding:8px;
-webkit-border-radius:20px;
border-radius:20px;
-webkit-transition:-webkit-transform 2s;
-moz-border-radius:20px;
-moz-transition:-moz-transform 3s;
}
#all_contents:hover{
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
-moz-transform:rotate(90deg);
}
#home{
font-size:20px;
}
#who_im{
font-size:20px;
}
#hello_and_welcome{
text-align:center;
font-size:50px;
color:Crimson;
}
#make_it_oblique{
font-style:normal;
font-family:Script;
text-align:center;
font-size:30px;
}
.JS file:
$(document).ready(function(){
$('#all_contents>div').filter(':first').show();
$('ul>li>a').click(function () {
$('#all_contents>div').hide();
var $this = $(this);
var target = $this.attr('href');
$(target).show();
return false;
});
});
