有人能告诉我为什么体育运动一直处于领先地位吗?
娱乐圈到底应该在哪里?
基本上,我试图将所有三个主题放在同一个地方
显示的原因:None是因为JQuery正在做相应的显示
#topBar {
position: relative;
top: 0px;
left: 0px;
height: 100px;
width: 100%;
margin: 0 auto;
text-align: center;
background-color: #000000;
color: #ffffff;
text-align: left;
}
#topBar span {
position: absolute;
bottom: 0;
}
#topBar a {
color: #ffffff;
text-decoration: none;
}
#Sport {
position: absolute;
display: none;
top: 500px;
}
#Entertainment {
position: absolute;
display: none;
top: 500px;
}
#Military {
position: absolute;
display: none;
top: 500px;
}
HTML:
<!DOCTYPE html>
<head> <meta charset="utf-8" />
<title>Matthew Jameson | Virtual Reality</title>
<link rel="stylesheet" href="VR3.css" type="text/css" />
<script src="jquery.js"></script>
</head>
<html lang="en" >
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title></title>
</head>
<body>
<header>
</header>
<Div id = "topBar">
<span>
<a id='slink' class='trigger' href='#Sports'>Sports</a>
<a id='elink' class='trigger' href='#Entertainment'>Entertainment</a >
<a id='mlink' class='trigger' href='#Military'>Military</a>
<span>
</div>
<Div id = "main">
</div>
<div id='Sports' class='slink triggered'>
<iframe width="280" height="158" src="http://www.youtube.com/embed/RPPJ5JHwO4A?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="280" height="158" src="http://www.youtube.com/embed/oMLarxR-q08?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<Div id = "Entertainment" class='elink triggered'>
<iframe width="280" height="158" src="http://www.youtube.com/embed/7vcGqha6xJ0?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="280" height="158" src="http://www.youtube.com/embed/La-WRhYeMCw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<Div id = "Military" class='mlink triggered'>
<iframe width="280" height="158" src="http://www.youtube.com/embed/6p7FM-mBsNk?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="280" height="158" src="http://www.youtube.com/embed/g1afRyN5_MQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<script>
$('.trigger').on('click',function(){
$('.triggered').slideUp(500);
var x = $(this).attr('id');
$('.' + x ).slideDown(500);
});
</script>
</body>
</html>