Создайте простую систему вкладок mootools 1.2.
Вопрос
Я пытаюсь создать очень простой интерфейс вкладок, используя версию mootools 1.2.Мне нужен эффект постепенного затухания, без скольжения или морфинга.Я пытался найти в Интернете несколько демо-версий, но все они относятся к разным версиям mootools или слишком сложны по сравнению с моими потребностями.Можете ли вы дать мне несколько рекомендаций?
Это изображение того, что я пытаюсь сделать, и пример кода.
альтернативный текст http://img204.imageshack.us/img204/4983/tabsd.jpg
<ul id="buttons">
<li><a href="#">button 1</a></li>
<li><a href="#">button 2</a></li>
<li><a href="#">button 3</a></li>
<li><a href="#">button 4</a></li>
</ul>
<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>
- Мне нужно, чтобы все вкладки были скрыты при загрузке страницы.
- каждый раз, когда пользователь нажимает кнопку, элемент div/tab, на который он ссылается, должен исчезнуть.
Решение
Не совсем идеальный фрагмент кода, но он должен выполнять свою работу:
window.addEvent('domready',function(){
var tabs = $$('div[id^="tab"]');
tabs.fade('hide');
$$('#buttons li').each(function(element,index){
element.addEvent('click',function(){
tabs.fade(0);
tabs[index].fade(1);
});
});
});
Другие советы
Вы также можете выполнить поиск в mootools forge и посмотреть, соответствует ли какая-либо из готовых реализаций вкладок вашим потребностям:
Не связан с StackOverflow