Question

我通过http://mrpaolo.github.io/mootools30days/20.html

找到了此代码

var showFunction = function() {
   $$('.hidden').setStyle('display', 'none'); 
   this.setStyle('display', 'block');
}


window.addEvent('domready', function() {
   var elOneB = $('contentoneB');
   var elTwoB = $('contenttwoB');
   var elThreeB = $('contentthreeB');

   $('oneB').addEvent('click', showFunction.bind(elOneB));
   $('twoB').addEvent('click', showFunction.bind(elTwoB));
   $('threeB').addEvent('click', showFunction.bind(elThreeB));
});

我想在默认情况下使其中一个元素显示onload。这可行吗？

Answer 1

该代码非常严格。很多这些教程非常糟糕/过时/与最佳实践脱节。

无论如何，你应该转换为更少干的东西。为了让它按原样运行，你可以这样做：

$('twoB').fireEvent('click');

但你真的应该重构一些没有与id和硬隐式绑定或内联CSS样式等耦合的东西。

(function(){
    var contentDivs = document.getElements('div.content');
    document.getElements('button.button-control').addEvent('click', function(e){
        contentDivs.addClass('hide');
        document.getElement('div.content.' + this.get('data-content')).removeClass('hide');
    });

}());

// pick one to show
document.getElement('button').fireEvent('click');

这与dom：

<button class="button-control" data-content="content-one">one</button>
<button class="button-control" data-content="content-two">two</button>
<button class="button-control" data-content="content-three">three</button>

<div class="content hide content-one">
    one
</div>
<div class="content hide content-two">
    two
</div>
<div class="content hide content-three">
    three
</div>

和

的CSS

.hide { 
    display: none; 
}

http://jsfiddle.net/dimitar/a7K4c/ - 只需修改标记即可轻松添加更多项目，无需触摸您的代码。

Answer 2

您可以尝试以下代码行

  <body onLoad="setInterval('var elOneB = $('contentoneB');',1000)">

在“＆lt;”head“＆gt;”之后部分。

Answer 3

感谢所有输入 - 我找到了这个线程，似乎解决了这个问题。这与脚本在页面上的定位有关 http://forum.joomla.org/viewtopic.php?f=727&t=803161

设置默认元素以显示onload - mootools

3 个答案: