如何在onclick功能中分别更改菜单位置

Question

我是jQuery的新手，我有类似于

类型的菜单

点击某个菜单后，我想更改菜单位置，如，然后点击另一个菜单位置，如。如何在重新加载页面后改变菜单的位置？

Answer 1

实现这一目标的最佳方法是使用诸如

之类的类来设置元素的样式

'main'
'sub'.

具有main类的那个具有CSS样式以将其放在左侧。

然后使用jQuery，只需点击一下即可切换类！

$('a').click(function(){
    $(a).removeClass('main');
    $(this).addClass('main');
});

Answer 2

要检测要与.sub#类交换的类名.main，您可以使用正则表达式，例如

HTML：

<div class="menu main">menu 1</div>
<div class="menu sub1">menu 2</div>
<div class="menu sub2">menu 3</div>
<div class="menu sub3">menu 4</div>
<div class="menu sub4">menu 5</div>

jQuery代码：

$(function () {
    $('div.menu').click(function () {
        var cls = $(this).prop("class");
        var m = cls.match(/(?:\s*)(sub\d+)(?:\s*)/);
        if (!m) {
            return;
        }
        cls =  m[1];
        $('div.main').removeClass('main').addClass(cls);
        $(this).removeClass(cls).addClass('main');
    });
});

jsfiddle