0

遇到问题，我在页面上有一个 javascript 内容切换器，但我似乎无法让一件事正常工作 - 如何使单击的按钮在单击后保持活动状态？

这是一个代码： JS

<script type="text/javascript">
function switch1(div) {
var option=['one','two','three'];
for(var i=0; i<option.length; i++) {
if (document.getElementById(option[i])) {
obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none";
}
}
}

window.onload=function () {switch1('one');}
</script>

CSS

#switchables li a {
    color: #262626;
    text-decoration: none;
    display: inline-block;
    padding-top: 14px;
    padding-right: 34px;
    padding-bottom: 10px;
    padding-left: 33px;
    background-image: url(img/catButBcgr.jpg);
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: none;
    border-right-color: #E1E1E1;
    border-left-color: #FFF;
}
#switchables li a:hover {
    background-image: url(img/catButBcgrH.jpg);
}
#switchables li a:active {
    background-image: url(img/catButBcgrA.jpg);
}

HTML

 <ul id="switchables">
   <li><a class="active" href="javascript:void[0];" onclick="switch1('one');">OVERVIEW</a></li>
   <li><a class="active" href="javascript:void[0];" onclick="switch1('two');">CATEGORY</a></li>
   <li><a class="active" href="javascript:void[0];" onclick="switch1('three');">CATEGORY</a></li>
</ul>
4

2 回答 2

2

您需要创建一个“活动”类并在单击时将其添加到按钮中。

#switchables a:active, #switchables a.active {
    background-image: url(img/catButBcgrA.jpg);
}

使用 jQuery 很容易：

$(document).ready(function() {
    myInit()
})

function myInit() {
    $('#switchables a').click(function() {
        $('#switchables a').removeClass('active')
        $(this).addClass('active')
    })
}
于 2013-01-29T15:24:22.847 回答
0

这是一个很好的学习机会。Diodeus 的回答完全正确，但他的 jQuery 代码在后台做了可怕的事情，请参阅评论：

$(document).ready(function() {
    myInit()
})

function myInit() {
  // on the following line, jQuery creates an array of objects (a tags)
  // (costly operation!) and adds click listener to each of them
  $('#switchables a').click(function() {
    // on the following line, jQuery creates the crazy God object again
    // and throws it off after this command
    // for each a tag and tries to remove class active from it
    // in only one case it actually does something - mere class removal
    // btw removeClass is ridiculous function if you dig into jQuery 1.10 source  
    $('#switchables a').removeClass('active')
    // this = the source of click event, not jQuery object
    $(this).addClass('active')
  })
}

这只是一个非常短的代码，现在想象一下你用这种风格编写整个网络。它会明显变慢，消耗更多的资源。

如果您坚持使用 jQuery，请尝试编写一些可重用的代码：

function myInit() {
  // jQuery object is created only once
  var $anchors = $('#switchables a');
  $anchors.click(function() {
    // ...and reused here
    $anchors.removeClass('active')
    $(this).addClass('active')
  });
}

但是使用本机 javascript 会做得更好

var items = document.querySelectorAll("#switchables a");
var prev = items[0];
[].forEach.call(items,function(item) {
  item.addEventListener("click",function() {
    // no need to loop every a tag here
    prev.classList.remove("active");
    item.classList.add("active");
    // remember previous active a tag
    prev = item;
  });
});

document.querySelectorAll是一个实时集合，这是任何 javascript 库都无法实现的，它是在浏览器的底层和更有效的代码中实现的。

建议在您熟悉 Javascript 之前不要使用 jQuery。如果没有这些知识，您将只能实现基本动画、复制和粘贴一些插件，仅此而已。而且，当您在某种程度上了解 Javascript 时，您可能会发现很少有理由再使用 jQuery。

在上面的代码中，可以很容易地删除 jQuery：

1：$(document).ready(handler)->document.addEventListener("readystatechange",handler);

2：$('#switchables a')->document.querySelectorAll("#switchables a");

3：$(nodeList).click(handler)->

[].forEach.call(nodeList,function(node) {
  // you can reuse node here, unlike the jQuery
  node.addEventListener("click",handler);
});

4：$(node).removeClass(className)->node.classList.remove(className)

5：$(node).addClass(className)->node.classList.add(className)

它长了几个字符。但它更具可重用性、可读性和有效性，而且它不是上帝的对象或 Cargo 邪教编程。

上面的本机代码是 javascript 标准，任何体面的浏览器都支持。三年前，当 Diodeus 提供他的答案时，IE8 在这里是个问题。但它现在已经死了（根据 gs.statcounter，全球不到 2%）。通过不支持它来帮助它彻底死去。

于 2015-12-07T03:13:25.020 回答