1

誰かがスポーツがトップに固執している理由を教えてもらえますか？

エンターテインメントは本来あるべき場所に落ちていますか？

基本的に、私は3つの主題すべてを同じ場所に配置しようとしています

表示の理由：なしは、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>
4

2 に答える 2

2

これは、CSSではセレクターが#Sportであるのに対し、HTMLではセレクターであるため#Sportsです。名前を一致させれば、あなたは元気になるはずです。

于 2012-11-19T21:56:21.163 に答える
0

Z-indexを使用します。値が大きいほど、要素の優先度が高くなり、一番上に表示されます。

于 2012-11-19T21:38:48.693 に答える