Question

我有4个div，其中包含#registrieren，#story，#faq和#mediadaten以及此jQuery脚本：

var menu='';
$(function()
{
    $('#registrieren').attr('id', 'menuAktiv');
    menu='registrieren';

    $('#registrieren').click(function()
    {
        if(menu != 'registrieren')
        {
            $('#menuAktiv').attr('id', menu);
            $('#registrieren').attr('id', 'menuAktiv');
            menu='registrieren';
        }
        alert(menu);
    });
    $('#story').click(function()
    {
    if(menu!='story')
    {
        $('#menuAktiv').attr('id', menu);
        $('#story').attr('id', 'menuAktiv');
        menu='story';
        }
        alert(menu);
    });
    $('#faq').click(function()
    {
        if(menu != 'faq')
        {
            $('#menuAktiv').attr('id', menu);
            $('#faq').attr('id', 'menuAktiv');
            menu='faq';
        }
        alert(menu);
    });
    $('#mediadaten').click(function()
    {
        if(menu != 'mediadaten')
        {
            $('#menuAktiv').attr('id', menu);
            $('#mediadaten').attr('id', 'menuAktiv');
            menu='mediadaten';
        }
        alert(menu);
    });
});

现在，当我点击#story，#faq或#mediadaten时，我无法将#registrieren的ID更改回#menuAktiv 。

当我在开头更改这些元素的另一个元素id时，会发生同样的问题。任何解决方案？

Answer 1

您应该使用类而不是ID来表示哪个div处于活动状态。

http://api.jquery.com/addClass

http://api.jquery.com/toggleClass

http://api.jquery.com/removeClass

然后使用$（'。classname'）来选择它。

Answer 2

而不是将ID更改为menuAktiv尝试使用类。

$(function()
{
    $('#registrieren').addClass('menuAktiv');

    // attach a click to all items
    $('#registrieren,#story,#faq,#mediadaten').click(function()
    {
        if ($(this).is(".menuAktiv"))
            return false;

        // remove current active menu class
        $('.menuAktiv').removeClass('menuAktiv');

        // set active class to clicked item
        $(this).addClass('menuAktiv');
    });
});

如果我看到你的标记

，这可能会更加优化

工作示例：http://jsfiddle.net/hunter/XMu9n/

Answer 3

从您的代码中，您似乎正在尝试使用id=menuAktiv激活某些内容。

然后，您可以使用class=menuAktiv。

的代码： 的

$('#registrieren').addClass('menuAktiv'); // initially set active // class to registrieren

然后单击任何一个更改该类。例如：

$('#registrieren, #store, #faq, #mediadaten').click( function() { $('.menuAktiv').removeClass('menuAktiv'); // remove active class $(this).addClass('menuAktiv'); // add active class to clicked item });

更多

如果你为此制作一个通用函数，那就更好了。例如：

function changeActiveElement(el) { $('.menuAktiv').removeClass('menuAktiv'); // remove active class $(el).addClass('menuAktiv'); // add active class to clicked item }

现在从点击处理程序调用此函数，如下所示：

$('#registrieren, #store, #faq, #mediadaten').click( function() { changeActiveElement(this); });

Answer 4

问题来自前几行。

 $('#registrieren').attr('id', 'menuAktiv');
menu='registrieren';

$('#registrieren').click(function()
{
    if(menu != 'registrieren')
    {
        $('#menuAktiv').attr('id', menu);
        $('#registrieren').attr('id', 'menuAktiv');
        menu='registrieren';
    }
    alert(menu);
});

在第三行中，$（'＃registrieren'）指向任何东西。 $（'＃registrieren'）在dom中搜索id =“registrieren”的元素。好吧，因为你已经将该元素的id更改为其他内容，$（'＃registrieren'）不会给你任何东西。

为了使它工作（不一定是做你的代码试图做的最好的方法），并且为了证明我刚才描述的实际发生，你可以做的是保存对该元素的引用变量（变更前）。然后在将来你可以随时使用它来定位元素。

var registrieren = $('#registrieren');

registrieren.attr('id', 'menuAktiv');

registrieren.click(function() {
//etc
});

至于使用类而不是id来“改变状态”，是的，这可能是一个更好的主意 - 不需要继续保存对以前的ID的引用。

jQuery元素ID更改导致错误

4 个答案:

更多