4

我有 4 个带有 ids #registrieren、#story和的 div#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我无法将 id 更改#registrieren回#menuAktiv.

当我在开始时更改这些元素的另一个元素 id 时，也会发生同样的问题。有什么解决办法吗？

4

4 回答 4

3

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

http://api.jquery.com/addClass

http://api.jquery.com/toggleClass

http://api.jquery.com/removeClass

然后使用 $('.classname') 来选择它。

于 2012-09-13T20:15:37.693 回答
3

而不是更改 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/

于 2012-09-13T20:16:36.830 回答
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);
});
于 2012-09-13T20:17:48.083 回答
-1

问题来自前几行。

 $('#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') 不会给您任何信息。

为了使其工作（虽然不一定是执行代码尝试执行的最佳方法），并证明我刚才描述的事情确实正在发生，您可以做的是将对该元素的引用保存在变量中（pre -改变）。然后在将来您想要定位该元素的任何时候都可以使用它。

var registrieren = $('#registrieren');

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

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

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

于 2012-09-13T20:19:47.630 回答