CODEWITHSUNDEEP
jqueryjquery-uimenu
Ben10
Ben10

Reputation: 3259

How to change the menu postion respectively in onclick function

I new to jQuery I have menu like following type menu

After click the some menu I want to change the menu position like this menuposition and then click another menu position like this menuposition. How to change the position of menu after reloading page respectively?

Upvotes: 1

Views: 180

Answers (2)

Stano
Stano

Reputation: 8939

For detecting the classname .sub# to be swapped with the .main class you can use regex, for example

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 code:

$(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

Upvotes: 0

Zevi Sternlicht
Zevi Sternlicht

Reputation: 5399

The best way to achieve this is to style the elements with classes such as 

'main'
'sub'.

The one with the class of main with have CSS styling to put it on the left.

Then using jQuery, switch the classes round upon a click!

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

Upvotes: 2

Related Questions