使用javascript的两个奇怪的错误（至少对我而言）

Question

我对javascript很新，需要一些帮助。

我的问题：

1. 每当我点击一个菜单项并且浏览器没有全屏显示时，它会将我带回到页面顶部..

2. 我的菜单淡入/淡出表格。我有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或标签

Answer 1

这将确保您的浏览器不会尝试关注“＃”链接。

$("#navigation li a").click(function(e) {
    e.preventDefault();

页面跳转到顶部是因为旧数据在新数据出现之前消失了。在转换期间在容器上设置静态高度以防止这种情况。

Answer 2

我不确切知道是什么原因造成了页面的顶部，但我的猜测是这一行：

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; }
• 分别用slideUp / slideDown替换fadeIn / fadeOut，因为它可以在内容之间进行更自然的切换

您投诉的最后一个问题（请参阅原始问题的评论）是您默认需要打开标签

要在页面加载时打开所需的链接，您可以触发点击点击处理程序后所需元素的点击，例如：

$("#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/

Answer 3

既然你提供了所有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