Question

我正在使用jquery和css来制作菜单。页面是第一次加载默认情况下第一个菜单处于活动状态（活动菜单的背景是暗的）然后如果我点击其他菜单它应该是黑暗的，之前是正常的。

我用来制作菜单的代码

$(document).ready(function() {

    $('.tab_title').click(function() {
        $('.tab_title').removeClass('active').next();
        $(".tab_title_arrow").removeClass('active_arrow').next();
        $(this).addClass('active');
        $(".tab_title_arrow").addClass('active_arrow'); 
    });
});

CSS代码：

.tab_title {
    background: url(images/lft-white-repeat.gif) repeat-x;
    height: 50px;
    width:auto;
    float: left;    
}

.tab_title_arrow {
    background: url(images/white-aerow.gif) no-repeat;
    height: 50px;
    width: 21px;
    float: left;    
}

.active {
    background: url(images/tab-repeat-blue.gif) repeat-x;
    height: 50px;
    width:auto;
    float: left;    
}

.active_arrow {
    background: url(images/rgt-aerow-img.gif) no-repeat;
    height: 50px;
    width: 21px;
    float: left;
}

#workflow_menu {
    color:#000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:5px;
    font-weight:bold;
    list-style: none;
}

#workflow_menu li {
    float: left;
}

HTML：

<ul id="workflow_menu">
    <li>
        <a href="#"><img src="images/tab-left.gif"  />
        </a>
    </li>
    <li>
        <a href="#" id="subset_criterion">
            <div class="tab_title active">Subset Criterion
            </div>
            <div class="tab_title_arrow active_arrow">
            </div>
        </a>
    </li>
    <li>
        <a href="#" id="analytical_base_tables">
            <div class="tab_title">Analytical Base Tables
            </div>
            <div class="tab_title_arrow">
            </div>
        </a>
    </li>
    <li>
        <a href="#" id="data_exploration">
            <div class="tab_title">Data Exploration
            </div>
            <div class="tab_title_arrow">
            </div>
        </a>
    </li>
    <li>
        <a href="#" id="models">
           <div class="tab_title">Models
           </div>
           <div class="tab_title_arrow">
           </div>
        </a>
    </li>
    <li>
        <a href="#" id="model_evalution">
            <div class="tab_title">Model Evalution
            </div>
            <div class="tab_title_arrow">
            </div>
        </a></li>
    <li>
        <a href="#">
            <img src="images/right-tab.gif"  />
        </a>
    </li>
</ul>

我坚持跟随：当“li”处于活动状态（点击）时，图像（rgt-aerow-img.gif）应该隐藏在所有其他“li”中。除了活跃的“li”之外，该图像（rgt-aerow-img.gif）应该从所有其他“li”中删除。 imeage可以是viewed here

Answer 1

我想我知道你要去的地方。

您想要在点击功能中执行的操作是将所有共享的目标定位或定位为$（“＃workflow_menu li”）。如果要定位链接文本，可能需要将其设为$（“＃workflow_menu li a”）。或者，如果您希望整个列表项成为链接，请将“display：block”添加到“li”中的“a”。反正...

 $("#workflow_menu li").click(function(){ //when you click a list item.
    $("#workflow_menu li").css('background-color','white'); //change all to white
    $(this).css('background-color','black'); //change the one i click to black
});

看起来你正在使用图像，但这是基本的想法。实际上，如果你能用css做你正在做的事情，你会更好。希望这会有所帮助。

通过jquery和css从非活动菜单中删除背景图像

1 个答案: