我的链接(由图像表示，位于页面左侧(在点击链接时无法有效地显示/隐藏div(包含一个句子，位于中间(。
这是我的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="practice">
<meta name="keywords" content="practice">
<title>Practice</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery_regular.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="js/top_javascript.js"></script>
<script type="text/javascript" src="js/jquery_rollover.js"></script>
<script type="text/javascript" src="js/jquery_slideout.js"></script>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="stylesheet/top_style.css" type="text/css" media="all">
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body onLoad="fontSizeChg(0);">
<div id="top_wrapper">
<div id="top_main_box">
<div id="slide">
<div id="top_main_l_box">
<div id="top_main_logo"><img src="image/title.png" alt=""></div>
<ul id="top_main_navi_1">
<li id="about"><a><img src="image/about.png" alt="" class="rollover"></a></li>
<li><a><img src="image/member.png" alt="" class="rollover"></a></li>
<li><a><img src="image/photo.png" alt="" class="rollover"></a></li>
<li><a><img src="image/links.png" alt="" class="rollover"></a></li>
<li><a><img src="image/contact.png" alt="" class="rollover"></a></li>
</ul>
</div>
<div id="about_this">
This is all the things about our page
</div>
<div id="top_main_r_box">
<div id="top_main_catch"><img src="image/catch.png" alt=""></div>
</div>
<div id="slideout" class="showbg"><img src="image/slideout.png"></div>
<div id="slidein" class="showcont"><img src="image/slidein.png"></div>
<br class="c_clear">
</div>
</div>
这是我的CSS：
#about{
}
#about_this{
position: fixed;
top: 200px;
left: 500px;
}
这是我的JQuery:
$('#about').toggle(function () {
$('#about_this').hide();
}, function () {
$('#about_this').show();
});
提前感谢！
使用此
<script>
$(document).ready(function(){
$("#about").click(function(){
$("#about_this").toggle();
});
});
</script>
也可以使用最新版本的jQuery
您必须首先添加一个动作列表
$("#about_this").click(function(){
$("#about_this").toggle();
});
切换不是一个事件，而是一个方法：http://api.jquery.com/toggle/
只需将JQuery代码更改为：
$('#about').click(function () {
$('#about_this').toggle();
});
如果你使用的是JQuery版本的Post1.7，你应该使用这样的点击事件：
$('#about').on("click", function () {
$('#about_this').toggle();
});
正在检查您的JQuery版本：
if (typeof jQuery != 'undefined') {
// jQuery is loaded => print the version
alert(jQuery.fn.jquery);
}
如果我理解正确，您最初会希望隐藏#about_this，因此将其设置为在CSS中不显示，然后在单击时使其可见，在再次单击时不可见。除了点击，你还可以使用悬停。
#about_this{
position: fixed;
top: 200px;
left: 500px;
display:none;
}
$('#about').on('click', function(){
$('#about_this').toggle();
}
使用.toggle() 时不需要运行.hide()和.show()
这里有一个选项的例子
$("#about").click(function() {
$("#about_this").toggle("slow",function(){
//Animation complete.
});
});