1
我使用anythingslider和colorbox來創建一種水平滑動頁面，這是一種電子書。我已經在anythingslider中實現了'nav（to）'函數來構建導航，這在Firefox和Safari中非常有用，但不是IE8。令人沮喪的是，滑塊部分仍然有效 - 它會左右移動，導航不能直接跳轉到「頁面」（實際上是一個列表項）。我懷疑有些挑剔的語法片斷被IE8拒絕，但我無法找到它來挽救我的生命。Javascript導航無法在IE8中工作
爲了充分披露，本頁面的代碼最初是使用in5創建的，它將InDesign文檔轉換爲HTML。這是一個馬虎，並沒有做我想要的所有東西，所以我已經手動編碼它約兩個星期來調整它（事實上，它花了兩個星期應該解釋爲什麼我不知道什麼是錯的。如果不清楚，我是一個總菜鳥）。
我已經遍尋全部的答案，包括stackoverflow，github和csstricks。我無法找到任何有我的特定問題的人，並且爲類似問題提供的答案是我已經完成或者沒有實現的事情。我修改了元標記以解釋IE8。我已經美化了javascript文件，所以我可以準確地找到導航在外部.js文件中定義的位置（並且我發現了它，但是我不足以完全理解我正在查看的JavaScript程序員）。
所以這裏的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BestBrands2013</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/jquery.min.js"><\/script>')</script>
<script type="text/javascript" src="assets/js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.anythingslider.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="assets/css/theme-minimalist-square.css">
<link rel="stylesheet" href="assets/css/pages.css">
<script type="text/javascript" >
var touchEnabled = 'ontouchstart' in document.documentElement;
var useSwipe = 1;
var pageMode = 'h';
var nav;
$(function(){
if($.colorbox) {
$('.lightbox').colorbox({iframe:true, width:"80%", height:"80%"});
$('.thumb').colorbox({maxWidth:"85%", maxHeight:"85%"});
}
$('img').bind('dragstart', function(event) { event.preventDefault(); });
$('.pageItem').each(function(){
if($(this).is('[onclick]')){
if(touchEnabled) {
//this.setAttribute('touchstart', this.getAttribute('onclick'));
//this.removeAttribute('onclick');
} else this.style.cursor = 'pointer';
}
});
if($.hasOwnProperty('scrollTo')){
nav = { numPages:$('.pages .page').length,
back:function(ref){var targ=$(ref).parent('.page').prev()[0]; if(targ!=undefined); $.scrollTo(targ, 500);},
next:function(ref){var targ=$(ref).parent('.page').next()[0]; if(targ!=undefined); $.scrollTo(targ, 500);},
first:function(){$.scrollTo($('.page')[0], 500)},
last:function(){$.scrollTo($('.page')[nav.numPages-1], 500)},
to:function(n){$.scrollTo($('.page')[n-1], 500)} };
}
var playvid = function(slider) {
var vid = slider.$currentPage.find('video');
if (vid.length) {
// autoplay
vid[0].play();
}
};
var sliderSettings = {
mode: pageMode,
theme: 'minimalist-square',
buildArrows: (!touchEnabled && 1),
buildNavigation: false,
buildStartStop: false,
hashTags: false,
infiniteSlides: false,
stopAtEnd: true,
onInitialized: function(e, slider) {
playvid(slider);
nav = {
numPages:slider.pages,
current:slider.currentPage,
next:function(){slider.goForward();},
back:function(){slider.goBack();},
first:function(){this.to(1);},
last:function(){this.to(this.numPages)},
to:function(n){slider.gotoPage(n);}
};
if(useSwipe) {
var container = $('#container');
var vertMode = (pageMode.substr(0,1) == "v");
container.swipe({
swipe:function(event, direction, distance, duration, fingerCount) {
switch(direction) {
case "left":
if(!vertMode) nav.next();
break;
case "right":
if(!vertMode) nav.back();
break;
case "up":
if(vertMode) nav.next();
break;
case "down":
if(vertMode) nav.back();
break;
}
}
});
}
},
}
$('#slider').anythingSlider(sliderSettings);
});
</script>
</head>
<body>
<div id="container">
<ul class="pages" id="slider">
<li class="page">
<img class="pageItem" src="assets/images/item_16.png" alt="page item"/>
<a href = "javascript:void(0)" onclick = "document.getElementById('popclinique').style.display='block';document.getElementById('fade').style.display='block'">
<img class="pageItem" src="assets/images/item_17.png" style="left:165px; top:116px; " alt="page item"/>
</a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8520&cm_sp=ebook-_-30513-_-bb_p2_clinique_sun" target="_blank"><img class="pageItem" src="assets/images/item_18.png" style="left:85px; top:381px; " alt="Clinique Sun"/></a>
<a href = "javascript:void(0)" onclick = "document.getElementById('popmilstar').style.display='block';document.getElementById('fade').style.display='block'">
<img class="pageItem" src="assets/images/item_19.png" style="left:38px; top:567px; " alt="page item"/>
</a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8517&cm_sp=ebook-_-30513-_-bb_p2_clinique_fragrance" target="_blank"><img class="pageItem" src="assets/images/item_20.png" style="left:271px; top:210px; " alt="Clinique Fragrance"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8523&cm_sp=ebook-_-30513-_-bb_p2_clinique_mens" target="_blank"><img class="pageItem" src="assets/images/item_21.png" style="left:436px; top:207px; " alt="Clinique Mens"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8501&cm_sp=ebook-_-30513-_-bb_p2_clinique_3step" target="_blank"><img class="pageItem" src="assets/images/item_22.png" style="left:591px; top:318px; " alt="Clinique 3 Step"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8512&cm_sp=ebook-_-30513-_-bb_p2_clinique_makeup" target="_blank"><img class="pageItem" src="assets/images/item_23.png" style="left:864px; top:350px; " alt="Clinique Makeup"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8505&cm_sp=ebook-_-30513-_-bb_p2_clinique_skincare" target="_blank"><img class="pageItem" src="assets/images/item_24.png" style="left:696px; top:47px; " alt="Clinique Skin Care"/></a>
<button class="pageItem" style="left:217px; top:641px; " alt="clinique 11" id="item26" onclick="nav.to(2);"> </button>
<button class="pageItem" style="left:271px; top:641px; " alt="nikebutton 11" id="item27" onclick="nav.to(3);"> </button>
<button class="pageItem" style="left:325px; top:641px; " alt="underarmourbuttpn 11" id="item28" onclick="nav.to(4);"> </button>
<button class="pageItem" style="left:379px; top:641px; " alt="coachbutton 11" id="item29" onclick="nav.to(5);"> </button>
<button class="pageItem" style="left:433px; top:641px; " alt="fossilbutton 11" id="item30" onclick="nav.to(6);"> </button>
<button class="pageItem" style="left:487px; top:641px; " alt="keurigbutton 11" id="item31" onclick="nav.to(7);"> </button>
<button class="pageItem" style="left:541px; top:641px; " alt="dellbutton 11" id="item32" onclick="nav.to(8);"> </button>
<button class="pageItem" style="left:595px; top:641px; " alt="applebutton 11" id="item33" onclick="nav.to(9);"> </button>
<button class="pageItem" style="left:649px; top:641px; " alt="dysonbutton 11" id="item34" onclick="nav.to(10);"> </button>
<button class="pageItem" style="left:703px; top:641px; " alt="samsungbutton 11" id="item35" onclick="nav.to(11);"> </button>
<button class="pageItem" style="left:757px; top:641px; " alt="knmorebutton 11" id="item36" onclick="nav.to(12);"> </button>
<img class="pageItem" src="assets/images/item_25.png" style="left:16px; top:12px; " alt="page item"/>
</li>
</body>
我已經縮寫了很多 - 整個事情是極大的相 - 那不過是整個頭部。我只包含一個'頁面'（實際上是一個列表項目）。相關位是onclick =「nav.to（n）;」在最後的按鈕處，以及靠近頭部尾部的滑塊設置腳本塊中的導航定義。
我知道每個人都可能有實際的編程問題需要回答，而我的軟編程工作對您的優先級列表很低，但我正拼命地盡我所能地學習這些東西，並且會完全感謝任何人的幫助可以提供。
謝謝！我試圖清理它，但錯過了那一個。不幸的是，這並沒有解決它。我得到的錯誤（我之前應該提到）是'nav是null或不是對象。'這是令人驚訝的，因爲我很確定這是宣佈的。 – InfinityMax 2013-02-26 16:08:07
我繼續前進，並打上了這個綠色的對號。大量的進一步測試讓我相信這個問題是由我的工作防火牆引起的，因爲這種防火牆會將很多IE禁用爲安全措施。我沒有嘗試解決政府繁文by節的拜占庭式迷宮問題，而是編寫了條件IE樣式表，將導航顯示設置爲「無」，從而完全消除了問題。它適用於不是IE的每臺計算機。 – InfinityMax 2013-02-26 17:06:33