Question

我正在使用一些jquery选项卡。我有四个下拉菜单。下拉一个有四个选项卡。下拉两个有三个标签。等等。选项卡位于主下拉列表的中心。我正在尝试在每个标签集的标签后面放置相同的背景颜色/图像。

目前我正在分配不同的类名，然后在不同的类名（m4，m3，t4，t3）上设置位置。这是最有效的方法吗？有没有办法简单地控制它们没有所有额外的类名？下降的数量可能会增加，这意味着标签的数量也可以。这也意味着更多的班级名称。

下拉一个宽度：1000px; 整体四个标签宽度：500px;

下拉两个宽度：1000px; 总共三个标签宽度：375px;

因此，从左侧开始，每个组的左侧位置都不同。我想把背景图像放在每组标签1的后面。如果没有下面的javascript，它会将其放在所有选项卡集的选项卡1设置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>

jquery在同一个班级设置不同的职位

0 个答案: