Question

我有一个使用JS（原型）的Magento网站在产品页面上显示标签内容，例如：http://persianrose.co.uk/index.php/face/rose-day-cream.html

它是一个基于活动选项卡的简单JS更改CSS显示属性，但是选项卡容器中的文本内容不会显示给某些用户。 [NB？]有些用户表示，如果他们刷新页面，他们可以看到标签吗？

在特定版本的IE上没有诸如所有用户之类的模式;我把它缩小到了一些使用IE 7和IE8的人。有些不是。我无法在我的浏览器版本中重新创建这个问题，因此我依赖于那些确实知道我所尝试过的东西是否有用的人员的反馈，到目前为止他们还没有。

从这些用户的测试中，有两个用户拥有完全相同的IE版本但有一个正确查看了tab-container内容而另一个用户无法看到它。

我已经尝试修补各种可能的IE CSS怪癖。现在我在问我的JS？他们的浏览器安全设置我不知道。我很难过......

在所涉及的语言中，我对JavaScript的能力最弱，因此这将是第一个寻找失败的地方。

以下是受影响用户的输出屏幕截图：http://dl.dropbox.com/u/6136148/error.jpg

提前感谢您的时间和精力。

HTML：

<ul id="tabs">
  <li class="tab"><a href="#how-to-use">How to use</a></li>
  <li class="tab"><a href="#ingredients">Ingredients</a></li>
</ul>
<div class="tab-container">
  <div id="how-to-use">This is a wonderful toner for use after cleansing morning and night.</div>
  <div id="ingredients">Aqua Rosa damascena, Citral, Citronellol, Farnesol, Linalool, Geraniol.</div>
</div>

CSS：

ul#tabs {list-style:none; padding:0}
ul#tabs li {float:left; margin:0 4px 0 0}
ul#tabs a {
  background:#fcfcfc;
  color:#bbb;
  display:block;
  font-family:'ColaborateRegular';
  font-size:13px;
  padding:5px 10px;
  width:80px;
  border:1px solid #eee;
  border-bottom-color:#ddd;
  position:relative;
  text-align:center;
  text-decoration:none;
  z-index:99;
}
ul#tabs a.active-tab {
  background:#fff;
  color:#843549;
  border-color:#ddd;
  border-bottom:1px solid #fff
}
.tab-container {
  padding:10px;
  margin-top:9px;
  width:390px;
  height:1%;
  min-height: 1% ;
  border:1px solid #ddd;
  zoom: 1;
  position: relative;
}

.tab-container div {display:none}
.tab-container div.active-tab-body, 
.tab-container div.active-tab-body div {display:block}

JS（原型）：

var Fabtabs = Class.create({
initialize : function(element,options) {
    var parent = this.element = $(element);
    this.options = Object.extend({
      hover: false,
      remotehover: false,
      anchorpolicy: 'allow-initial' // 'protect', 'allow', 'allow initial', 'disable'
    }, options || {});
    this.menu = this.element.select('a[href*="#"]');
    this.hrefs = this.menu.map(function(elm){
      return elm.href.match(/#(\w.+)/) ? RegExp.$1 : null;
    }).compact();
    this.on(this.getInitialTab());
    var onLocal = function(event) {
      if(this.options.anchorpolicy !== 'allow'){ event.stop(); }
    var elm = event.findElement("a");
    if (elm.href.match(/#(\w.+)/)) {
      this.activate(elm);
      if(this.options.anchorpolicy === 'protect') { window.location.hash = '.'+this.tabID(elm); }
      }else {
      document.location = elm.href;
  }
};
var onRemote = function(event) {
  if(this.options.anchorpolicy !== 'allow'){ event.stop(); }
    var trig = event.findElement("a");
    if (elm.href.match(/#(\w.+)/)) {
      this.activate(this.tabID(trig));
      if(this.options.anchorpolicy === 'protect') { window.location.hash = '.'+this.tabID(elm); }
    } else {
        document.location = elm.href;
      }
  }
    this.element.observe('click', onLocal.bindAsEventListener(this));
    if(this.options.hover) {
      this.menu.each(function(elm){elm.observe('mouseover', onLocal.bindAsEventListener(this))}.bind(this));
    }
    var triggers = []; 
    this.hrefs.each(function(id){
      $$('a[href="#' + id + '"]').reject(function(elm){
        return elm.descendantOf(parent)
      }).each(function(trig){
        triggers.push(trig);
      });
    })
    triggers.each(function(elm){
      elm.observe('click', onRemote.bindAsEventListener(this));
      if(this.options.remotehover) {
      elm.observe('mouseover', onRemote.bindAsEventListener(this));
    }
    }.bind(this));
},
activate: function(elm) {
  if(typeof elm == 'string') {
    elm = this.element.select('a[href="#'+ elm +'"]')[0];
  }
  this.on(elm);
    this.menu.without(elm).each(this.off.bind(this));
},
off: function(elm) {
    $(elm).removeClassName('active-tab');
    $(this.tabID(elm)).removeClassName('active-tab-body');
},
on: function(elm) {
    $(elm).addClassName('active-tab');
    $(this.tabID(elm)).addClassName('active-tab-body');
},
tabID: function(elm) {
    return elm.href.match(this.re)[1];
},
getInitialTab: function() {
    if(this.options.anchorpolicy !== 'disable' && document.location.href.match(this.re)) {
      var hash = RegExp.$1;
      if(hash.substring(0,1) == "."){
        hash = hash.substring(1);
      }
      return this.element.select('a[href="#'+ hash +'"]')[0];
    } else {
      return this.menu.first();
    }
},
re: /#(\.?\w.+)/
});
document.observe("dom:loaded", function(){ new Fabtabs('tabs'); });

Answer 1

那里你有一个明显的错误。在第16行，您尝试访问this.element以访问a元素。但是，IE告诉你this.element什么都不是（null）。所以我怀疑分配时会出错：

var parent = this.element = $(element);

要检查，您可以简化：

var myElement = $(element);

因此使用您传递给initialize函数的元素赋值。然后，您可以检查它是否与您的浏览器有关：

console.info(myElement);

打开你的控制台并查看它的内容。如果仍然说null那么你必须深入挖掘。当它没有通过第16行时，它没有连接到任何元素，所以如果你可以将其他元素作为测试，请尝试。如果失败，它可能会卡在遍历DOM或者有一些奇怪的javascript /浏览器配置问题。

IE / JS的IE问题

1 个答案: