Question

我想使用Mootools为我的php应用程序创建一个标签视图。我从php脚本创建了n个标签页。我的观点如下。

<div>
<ul id="1">
    <li>Popular</li>
    <li>New Addition</li>
</ul>
</div>
<div>
<ul id="2">
    <li>Popular</li>
    <li>New Addition</li>
</ul>
</div>
...
<div>
<ul id="n">
    <li>Popular</li>
    <li>New Addition</li>
</ul>
</div>

如何根据每个标签下的active或Populalar点击次数来应用样式类New Addition。

由于

Answer 1

var tabs = document.getElements('li');
tabs.addEvent('click', function() {
    tabs.removeClass('active');
    this.addClass('active');
});

尝试example。

Answer 2

以下是如何在MooTools中执行此操作：

var activeElement = null;
$$('div ul li'
   /* you probably want a better selector,
      how about giving a parent element an id? */
  ).each(function(item){
    item.addEvent('click',function(event){
        $(event.target).addClass('active');
        if(activeElement != event.target){
            if(activeElement!=null)
                $(activeElement).removeClass('active');
            activeElement = event.target;
        }
    });
});

更新：以下是改进版本，感谢@steweb，source：

$$('#containerID li').each(function(item){
    item.addEvent('click',function(event){
        // minor improvement to steweb's code,
        // restrict to .active inside container
        $$('#containerID .active').removeClass('active');
        this.addClass('active');
    });
});

它要求root div具有id“containerId”：

<div id="containerId">
<ul id="1">
<!-- etc -->

Answer 3

object.className ='active';

（对象是你想要突出的地方）

如何使用Mootools或Javascript激活点击样式类？

3 个答案: