Question

我有以下结构：

<ul id='myTopicsList'>

<li> 
<a><span> First Element </span></a>
</li>

.....

</ul>

第一次加载页面时，将通过将其高亮显示为背景颜色蓝色来选择第一个li。

下次用户点击列表中的其他元素时，它应更改为蓝色，其余元素应为白色背景。

我正在使用这个脚本：

function GetMyTopic(catID) {
 $('#myTopicsList li').each(function () {

        if ($(this).attr('id').indexOf(catID) > 0) {
            $(this).addClass('SideBarBoxliSelected');
        }
        else {
            $(this).addClass('SideBarBoxli');
        }
    });
}

这里是css：

.SideBarBoxli{margin-bottom:4px; background-color:#fafafa; height:22px; }
.SideBarBoxli:hover {background-color:#E3ECF8; cursor:pointer; }
.SideBarBoxliSelected{margin-bottom:4px; background-color:#6388BF; height:22px; }

当我点击并将SideBarBoxliSelected课程分配给点击的li时，背景保持不变。

有什么建议吗？

Answer 1

这是我要使用的html：

<ul id="myTopicsList">
    <li class="SideBarBoxli SideBarBoxliSelected">first</li>
    <li class="SideBarBoxli">sec</li>
    <li class="SideBarBoxli">three</li>
    <li class="SideBarBoxli">four</li>
    <li class="SideBarBoxli">fiffff</li>
</ul>

以下是我将使用的代码：

$(document).ready(function() {
    $('ul#myTopicsList li').click(function() {
        $('li.SideBarBoxliSelected').removeClass('SideBarBoxliSelected');
        $(this).addClass('SideBarBoxliSelected');
    });
});

.click函数将设置它，以便每当有人点击任何li项时，它们将触发匿名函数，该函数从当前选定的函数中删除类SideBarBoxliSelected并添加它点击了项目。

修改

您还可以添加以下内容以确保第一个项目在页面加载时具有类SideBarBoxliSelected：

$('ul#myTopicsList li:first').addClass('SideBarBoxliSelected');

上述行将在$('ul#myTopicsList li').click来电之前就行了。

Answer 2

试试这个。

$(document).ready(function() {
    $('#myTopicsList li').click( function() {
        $('#myTopicsList li').removeClass('SideBarBoxliSelected');
        $(this).addClass('SideBarBoxliSelected');
    });
});

Answer 3

什么时候调用GetMyTopic？我建议使用Firefox的Firebug插件来调试你的javascript。确保将正确的CSS类应用于测试用例中涉及的每个LI。如果没有，您可以通过在调试器中单步执行脚本来找出原因。您还可以查看firebug中的CSS以查看正在应用的样式。

此外，在示例代码中，您使用'id'属性来标识列表项，但您没有在HTML或脚本中定义id属性。也许有些东西被遗漏了？

Answer 4

我不确定使用indexOf函数是将id与传入的变量进行比较的最佳方法。也许尝试使用：

if ($(this).attr('id') == catID)

代替？

Answer 5

我认为您需要在“SideBarBoxliSelected”前添加句点，以便.SideBarBoxliSelected

Answer 6

这是最简单的方法。

HTML

<ul id="myTopicsList">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

CSS

#myTopicsList li {background:#fafafa;margin-bottom:4px;height:22px;}
#myTopicsList li:hover {background:#E3ECF8;cursor:pointer;}
#myTopicsList li.active {background:#6388BF;}

的jQuery

$(document).ready(function(){
    $('#myTopicsList li').click(function(e){
        // remove all active classes
        $('#myTopicsList li').removeClass('active');
        // add active class to clicked item
        $(this).addClass('active');
    });
    // click on the first item on page load
    $('#myTopicsList li').eq(0).click();
});

更改li元素问题的css类

6 个答案:

修改