单击选项卡不会准确工作

时间：2014-08-07 20:31:41

标签： javascript jquery css html5

我有一个包含很少标签的简单网页，每个标签都有一个段落（或<div>）。

页面应通过单击这些选项卡显示相应的段落。 但无论我点击哪个标签，都会显示另一个标签下的所有段落。例如，如果我点击“联系”＆＃39;标签，它显示了“我是谁”，“＆＃39;法塔赫博客＆＃39;同样。

[注意：这是一个很好的做法，显示同一页面的一部分，我在做什么？]

我的代码：

.PHP文件：

 <!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文件：

/*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档案：

$(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;
    });
});

1 个答案:

答案 0 :(得分：0)

在这一行：<b>LITTLE MORE ABOUT ME:<b>你没有关闭标签。它应该是<b>LITTLE MORE ABOUT ME:</b>

另外，您应该查看有关<i>和<b>代码的这些链接：

相关问题
最新问题