jquery - 如何在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