1

外部.jsファイルがありますが、それが原因かどうかわかりません.js。

.jsファイルは次のとおりです: ( /js/scripts.js)

$(document).ready(function (){
    $('#about_link').click( function() {
        $('.middleface img').css('display','none');
        $('.aboutface').css('display','');
    });
});

私は 3 つのリンク ( index、about、contact) をそれぞれ#index_link、#about_link&で持ってい#contact_linkます。

私がやろうとしているのは、[About]<a>リンクをクリックすると、中の画像.middleface divが消えて、.aboutface divが表示されるはずです。

<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
 <!-- navigation -->
<div class="navbar">
     <div class="navlinks">
        <a type="button" id="index_link">Index</a>
        <a type="button" id="about_link">About</a>
        <a type="button" id="contact_link">Contact</a>
             </div> 
</div>
<!-- middlecontent -->
<div class="middleface">
    <img id="middle_image" src="images/blabla2.png" alt="blabla">
    <!-- aboutpage -->
            <div class="aboutface"></div>
   </div>
</div>
</body>
</html>

...そしてCSS

.middleface {
    background-image:url('images/blabla1.jpg');
    background-size:cover;
    width:100%;
}

#middle_image {
    height: 230px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
}

.middleface img{}

.aboutface {
    display:none;
    margin-left:auto;
    margin-right:auto;
    background-color:grey;
    width:800px;
    height:280px;
}
4

5 に答える 5

4

試す：

$(document).ready(function (){
    $('#about_link').click( function() {
        $('.middleface img').css('display','none');
        $('.aboutface').css('display','block');
        });
    });

非表示と表示を使用することもできます。

 $(document).ready(function (){
    $('#about_link').click( function() {
        $('.middleface img').hide();
        $('.aboutface').show();
        });
    });
于 2013-06-05T06:38:51.087 に答える
1

問題を解決するためのいくつかのアイデアを次に示します。

  1. on()の代わりに関数を使用します (ここでclick()推奨されているように)
  2. クリックイベントをアタッチする前にバインドを解除すると、奇妙な動作が回避されます (ダブルclick()s ... )
  3. ID による HTML 要素へのアクセスは、.middleface img=> useよりも高速です#middle_image
  4. 要素を表示するにはdisplay blockorinlineを使用しますが、エフェクトには jquery 関数 hide()orshow()または eventfadeIn()を使用することをお勧めfadeOut()します。

:

$('#about_link').unbind('click').on('click', function() {
     $('#middle_image').hide();
     $('.aboutface').show();
});

それが役に立てば幸い ！

于 2013-06-05T06:48:51.503 に答える
0

ブロックを使用して div を表示するだけです。これを使って。

$(document).ready(function (){
  $(document).on('click','#about_link', function() {
     $('.middleface img#middle_image').css('display','none');
     $('.aboutface').css('display','block');
  });
});
于 2013-06-05T06:44:55.553 に答える
0

Try-

$(document).ready(function (){
$('#about_link').click( function() {
    $('#middleface').hide();
    $('.aboutface').show();
});
});

You can use the id of the image in the aboutface div in the show() line

于 2013-06-05T06:39:24.907 に答える