我对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