1

我有一个外部.js文件，我不确定是不是问题.js。

这是.js文件：（/js/scripts.js）

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

我有三个链接（index, about, contact），每个链接分别带有#index_link, #about_link& #contact_link。

我想要做的是通过单击关于<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. 在附加点击事件之前解绑它，它避免了奇怪的行为（double click()s ...）
  3. 通过 id 访问 HTML 元素比.middleface img=> 使用更快#middle_image
  4. 要显示元素使用display blockorinline但最好使用 jquery 函数 hide()or show()or 事件fadeIn()和fadeOut()效果。

：

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

希望能帮助到你 ！

于 2013-06-05T06:48:51.503 回答
0

You simply display the div using block. Use this.

$(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

尝试-

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

您可以在 show() 行的 aboutface div 中使用图像的 id

于 2013-06-05T06:39:24.907 回答
0

尝试使用preventDefault () 作为链接的点击事件

$(document).ready(function (){
    $('#about_link').click( function(e) {
        e.preventDefault();
        $('#middle_image').css('display','none');   //$('#middle_image').hide();
        $('.aboutface').show();
    });
});
于 2013-06-05T06:40:22.187 回答