JQuery установить разные позиции в одном классе - PullRequest
Новая
       24

JQuery установить разные позиции в одном классе

1 голос
/ 18 мая 2011

Я работаю с некоторыми вкладками jquery. У меня есть четыре выпадающих списка. У выпадающего есть четыре вкладки. У выпадающего две есть три вкладки. И так далее. Вкладки центрированы в главном раскрывающемся списке. Я пытаюсь расположить один и тот же цвет фона / изображение за вкладкой один из каждого набора вкладок.

В настоящее время я назначаю разные имена классов, а затем устанавливаю позицию для этих разных имен классов (m4, m3, t4, t3). Это самый эффективный способ? Есть ли способ просто контролировать их без всех дополнительных имен классов? Количество выпадающих списков может возрасти, что означает, что количество вкладок также может увеличиться. Что также означает больше имен классов.

Раскрыть одну ширину: 1000 пикселей; Общая ширина четырех вкладок: 500 пикселей;

Выпадают две ширины: 1000 пикселей; Общая ширина трех вкладок: 375 пикселей;

Итак, слева у каждого сета будет разная левая позиция. Я хочу разместить это фоновое изображение за вкладкой 1 каждого набора. Без javascript ниже он помещает его в положение набора вкладок 1 для всех наборов вкладок. Имеет смысл?

JavaScript 

$('.m4').css({left:$('.t4').position()['left']});
$('.m3').css({left:$('.t3').position()['left']});

HTML 

<ul id="mainNavBar">
<li id="pos1"><a href="#"><span class="accesslinks">Category 1</span></a>
    <div class="menuDrop">
        <div class="slideContent">
        <div class="tabSlide">
            <ul>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
            </ul>
            <ul>
                <li>Product</li>
            </ul>
            <ul>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
            </ul>
            <ul>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
            </ul>
        </div>
        </div>
        <ul class="tabs">
            <div class="tabMove m4">&nbsp;</div>
            <li class="tab t4"><a href="#">Set 1</a></li>
            <li class="tab"><a href="#">Set 2</a></li>
            <li class="tab"><a href="#">Set 3</a></li>
            <li class="tab last"><a href="#">Set 4</a></li>
        </ul>
    </div>
</li>
<li id="pos2"><a href="#"><span class="accesslinks">Category 2</span></a>
    <div class="menuDrop">
        <div class="slideContent">
        <div class="tabSlide">
            <ul>
                <li>Product</li>
                <li>Product</li>
            </ul>
            <ul>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
            </ul>
            <ul>
                <li>Product</li>
                <li>Product</li>
                <li>Product</li>
            </ul>
        </div>
        </div>
        <ul class="tabs">
            <div class="tabMove m3">&nbsp;</div>
            <li class="tab t3"><a href="#">Set 5</a></li>
            <li class="tab"><a href="#">Set 6</a></li>
            <li class="tab"><a href="#">Set 7</a></li>
        </ul>
    </div>
</li>

...