我这里有一个脚本,除了一个小细节外,它的效果非常好。它基本上是作为点击功能运行的,点击链接时会淡入和淡出某些DIV。
然而,问题是,当您单击页面上的ANYWHERE时,它会删除DIV并留下一个空的内容区域,直到您单击其中一个链接。显然这是个问题。
由于NDA的原因,我无法使用我正在使用的确切代码,但这里是我在div中使用的相同设置,只是一些纯文本。
只需单击链接即可查看功能,然后单击页面上的其他任何位置(在div中,在空白处,无论什么地方),即可看到div消失。我知道JavaScript就是这么调用的,但我不知道如何禁用div中的点击,所以不会发生这种情况。此外,如何做到这一点,这样它就不会禁用该分区内的链接。
非常感谢您的帮助。这个网站是一个救命稻草。
这是我从这个网站上编辑的原始代码,用来显示我的基本布局。基本上是一堆内联的链接,当点击时,它们会将DIVS的一部分更改为另一部分:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var gLastH = null;
var gLastId = null;
$('.toggle').click(function(e) {
$('.toggleh:visible').fadeOut('slow');
gLastId = $(this).attr('id');
console.log('#' + gLastId + 'h');
gLastH = $('#' + gLastId + 'h');
$(gLastH).fadeIn('slow');
e.stopPropagation();
});
$('*').click(function(e) {
if ($(this).attr('id') != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
});
</script>
</head>
<body>
<div id="menubar">
<a href="#" onclick="return false;" class="toggle" id="toggle1" style="display: inline;">
text here</a>
<a href="#" onclick="return false;" class="toggle" id="toggle2" style="display: inline;">
text here</a>
<a href="#" onclick="return false;" class="toggle" id="toggle3" style="display: inline;">
text here</a>
<a href="#" onclick="return false;" class="toggle" id="toggle4" style="display: inline;">
text here</a>
<div class="toggleh" id="toggle1h">
some description in here I suppose
</div>
<div class="toggleh" id="toggle2h" style="display: none;">
some description in here I suppose #2dsfds sdfdsfa sdf
</div>
<div class="toggleh" id="toggle3h" style="display: none;">
some description in here I suppose #3dffdfasdfdsfdfasf
</div>
<div class="toggleh" id="toggle4h" style="display: none;">
some description in here I suppose #4 dfdafa
</div>
</div>
</body>
</html>
$('*').click(...
为所有元素(*)设置一个点击处理程序。您可以删除此功能。
这就是这个代码的作用:
$('*').click(function(e) {
if (this.id != gLastId) {
$(gLastH).fadeOut('slow');
}
e.stopPropagation();
});
它选择文档中的所有元素(包括html
、head
和body
),并为其附加一个单击处理程序。当您单击文档时,它会比较可能为空的id
,然后淡出显示的div。
没有那个代码的演示。
不是真正的专家但这似乎是的故障部分
$('*').click(function(e) {...............}