javascript有两个奇怪的bug(至少对我来说）
Two weird bugs (at least for me) with javascript
我对javascript很陌生，需要一些帮助。
我的问题：
-
每当我点击菜单项，而浏览器没有全屏显示时，它会让我回到页面的顶部。。
-
我的菜单淡入/淡出表格。我有5个菜单项。当我逐个浏览所有菜单项时，有时页面会刷新，而不是转换淡入/淡出。
以下是我正在使用的javascript：
$(document).ready(
function() {
var currentHash = location.hash.split("#");
if (currentHash.length > 1) {
var currentHashString = currentHash[1].toString();
$("#navigation li a").removeClass("selected");
$("#navigation li a[href*="+currentHashString+"]").addClass("selected");
var contentCollection = document.getElementsByTagName("li");
for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id === currentHashString || currentHashString === "") {
$(contentCollection[i]).fadeIn(650);
} else {
$(contentCollection[i]).fadeOut(650).css("display", "none");
if (location.hash !== "#") {
location.hash = "#"+currentHash[1];
} // if
} // else
} // if
} // for
} else {
var contentCollection = document.getElementsByTagName("li");
for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id !== "one") {
$(contentCollection[i]).fadeOut(650).css("display", "none");
}
} // if
} // for
} // else
$("#navigation li a").click(function() {
var myClicked = this.href.split("#");
$("#navigation li a").removeClass("selected");
this.className = "selected";
var contentCollection = document.getElementsByTagName("li");
for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id === myClicked[1]) {
$(contentCollection[i]).fadeIn(650);
} else {
$(contentCollection[i]).fadeOut(650).css("display", "none");
if (location.hash !== "#") {
location.hash = "#"+myClicked[1];
}
} // else
} // if
} // for
return false;
} // click func
); // click event
} // anon func 1
); // ready
我的HTML是一个常规的无序列表，包含表而不是列表项。渐变效果适用于表格。如果需要，我会提供更多信息。提前谢谢。
HTML：
<!-- Start table area -->
<div id="main-content">
<div id="navigation">
<ul>
<li><a href="#one" class="selected">Volkswagen</a></li>
<li><a href="#two">Audi</a></li>
<li><a href="#three">Chrysler</a></li>
<li><a href="#four">GM</a></li>
</ul>
</div><!-- End Navigation -->
<div id="content-wr">
<div id="content-slider">
<ul id="content-slider-inside">
<!-- TABLE 1 -->
<li id="one">
<table width="759" border="0" cellspacing="0" cellpadding="0">
<tr height="3">
<td height="3" width="3" class="borderhautgauche"></td>
<td height="3" width="627" class="borderhaut"></td>
<td height="3" width="3" class="borderhautdroit"></td>
</tr>
<tr>
<td class="bordergauche"></td>
<td>
<table width="752" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="151" class="TopTablehitch">MARQUE</td>
<td width="187" class="TopTablehitch">MODÈLES</td>
<td width="178" class="TopTablehitch">SÉRIES</td>
<td width="236" class="TopTablehitch">ANNÉES</td>
</tr>
<tr class="texttablehitch" onmouseover="this.className='texttableoverhitch'" onmouseout="this.className='texttablehitch'">
<td><strong>table1</strong></td>
<td><strong>table1</strong></td>
<td>Tous les modèles</td>
<td>1995-1997</td>
</tr>
<tr class="texttablehitch" onmouseover="this.className='texttableoverhitch'" onmouseout="this.className='texttablehitch'">
<td><strong>table1</strong></td>
<td><strong>table1</strong></td>
<td>Autres modèles</td>
<td>1998-2000</td>
</tr>
<tr class="texttablehitch" onmouseover="this.className='texttableoverhitch'" onmouseout="this.className='texttablehitch'">
<td><strong>table1</strong></td>
<td><strong>table1</strong></td>
<td>Tous les modèles</td>
<td>2010-2012</td>
</tr>
<tr class="texttablehitch" onmouseover="this.className='texttableoverhitch'" onmouseout="this.className='texttablehitch'">
<td><strong>table1</strong></td>
<td><strong>table1</strong></td>
<td>Tous les modèles</td>
<td>2000-2011</td>
</tr>
</table>
</td>
<td class="borderdroit"></td>
</tr>
<tr>
<td height="4" class="borderbasgauche"></td>
<td width="627" class="borderbas"></td>
<td width="3" class="borderbasdroite"></td>
</tr>
</table>
</li>
没有关闭的div或标签的目的
我不知道是什么原因导致页面顶部，但我猜是这一行：
if (location.hash !== "#") {
location.hash = "#"+currentHash[1];
无论如何，将函数更改为更"jQueryish"的样式，问题似乎已经解决：
$("#navigation li a").click(function() {
var el = $(this);
el.addClass("selected");
el.parent().siblings().children("a").removeClass("selected");
$("#content-slider-inside li").slideUp(650)
.eq(el.parent().index()).slideDown(650);
return false;
});
作为建议，我做了两个修改：
- 默认情况下隐藏
li，添加规则#content-slider-inside li { display:none; } - 将fadeIn/fadeOut分别替换为slideUp/slideDown，因为它可以在内容之间进行更自然的切换
你抱怨的最后一个问题（见对原始问题的评论）是，你需要一个选项卡来默认打开
要在页面加载时打开所需的链接，您可以在等待点击处理程序后触发对所需元素的点击，例如：
$("#navigation li a").first().click() // Opens first tab
或者，根据您的代码（警告-这是一段未经测试的代码）：
var currentHash = location.hash.split("#");
if(currentHash.length > 1) {
var currentHashString = currentHash[1].toString();
$("#navigation li a[href*="+currentHashString+"]").click();
}
else{
$("#navigation li a").first().click();
}
所以，这是最后的代码：
$(function(){
$("#navigation li a").click(function() {
var el = $(this);
el.addClass("selected");
el.parent().siblings().children("a").removeClass("selected");
$("#content-slider-inside li").slideUp(650)
.eq(el.parent().index()).slideDown(650);
return false;
});
var currentHash = location.hash.split("#");
if(currentHash.length > 1) {
var currentHashString = currentHash[1].toString();
$("#navigation li a[href*="+currentHashString+"]").click();
}
else{
$("#navigation li a").first().click();
}
});
参见小提琴：http://jsfiddle.net/tDLNG/7/
这将确保您的浏览器不会试图跟随链接到"#"。
$("#navigation li a").click(function(e) {
e.preventDefault();
页面跳转到顶部是因为旧数据在新数据出现之前就消失了。在转换过程中设置容器的静态高度以防止这种情况发生。
既然你提供了所有的JS，你还能提供一些HTML吗？
编辑
尝试用以下行替换当前功能：
$("#navigation li a").click(function() {
// LOCK SCROLL POSITION
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
var myClicked = this.href.split("#");
$("#navigation li a").removeClass("selected");
this.className = "selected";
var contentCollection = document.getElementsByTagName("li");
for (i=0;i<contentCollection.length;i++) {
if (contentCollection[i].id) {
if (contentCollection[i].id === myClicked[1]) {
$(contentCollection[i]).fadeIn(650);
} else {
$(contentCollection[i]).fadeOut(650).css("display", "none");
if (location.hash !== "#") {
location.hash = "#"+myClicked[1];
}
} // else
} // if
} // for
/* RESTORE SCROLL */
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])
return false;
} // click func
); // click event
相关文章：
- javascript中的闭包对我来说工作方式不同
- Rails JQuery和Ajax对我来说工作不正常
- 如果使用单个实体，使用automapper对我来说很好
- css animate fadeIn'对我来说不起作用
- 对我来说，用javascript设置这个函数最有效的方法是什么
- 文本中的函数示例对我来说没有意义
- 使用 jQuery 编写一个可排序的列表(只是基本功能，jQueryUI 对我来说太重了）
- 通过body onload使用json_encode发送数组对我来说不起作用
- 对我来说，以排序的方式检索这些信息的最佳方式是什么
- javascript有两个奇怪的bug(至少对我来说）
- 在同一个按钮上调用多个函数对我来说不起作用(ajax）
- RegExp(对我来说）并不那么简单
- jQuery's的slideUp功能对我来说无法正常工作
- javascript中的单元测试:如何模拟?-一个(对我来说很难）的例子
- 倒数第二的第n个孩子没有'对我来说不起作用
- 我应该将php json编码转换为Ajax数组，第一次对我来说很难理解
- 否则if语句对我来说似乎是合理的，但会破坏代码
- Node.js事件循环对我来说没有意义
- Javascript -检查页面加载时是否存在cookie对我来说不起作用
- d3.scale.20级对我来说太聪明了
