Question

我根据他们的链接选项使用以下JavaScript代码到slideUp和slideDown个不同的div：

Javascript / jQuery：

function toggleDiv(option) {
    $('.content-box').slideUp();
    $('#' + option).slideDown(300);
}

HTML：

<li><a class="active" href="javascript:toggleDiv('toggle1')">Toggle 1</a></li>
<li><a href="javascript:toggleDiv('toggle2')">Toggle 2</a></li>

整个代码完美无缺，但我想做的是class =“active”切换到用户按下的实际链接。我听说过一些属性方法或者类似于bur的东西没有想法如何继续。所以我会恭喜你的任何帮助。

顺便说一句，为什么代码在Firefox / Chrome中运行顺利，但在Safari中却很滞后？

在这里检查JSFiddle：https://jsfiddle.net/3vfwdL34/ 由于某种原因，它不能在JSFiddle中工作，但相同的代码在普通的.html文件中工作正常。

Answer 1

您需要在内联事件中使用它们之前定义该函数。将代码包装在head部分中，一切都应该适合你。并且为了添加活动类，将当前单击的对象传递给方法并向其添加类。

<head>
  <script>
    function toggleDiv(option,that) {
       $('.active').removeClass('active');
       $(that).addClass('active');
       $('.content-box').slideUp();
       $('#' + option).slideDown(300);
    }
  </script>
</head>

但是你可以使用jquery来简化任务：

$('li a').click(function(){
   $('.active').not(this).removeClass('active');
   $(this).addClass('active');
   $('.content-box').slideUp();
   $('#toggle'+($(this).parent().index()+1)).slideDown(300);
});

<强> Demo

Answer 2

试试这样：

function toggleDiv(option) {
    //move the class 'active' to the pressed li
    ("a").removeClass("active")
    $('#' + option).addClass("active")

    $('.content-box').slideUp();
    $('#' + option).slideDown(300);
}

javascript中的多功能切换功能

2 个答案: