更改跨度CSS类OnClick

Question

我有一个像这样的Span标签

<span id="SpanHeader" class="CourseHeader"><a class="SubCourses" href="#" ><strong>@course.CourseTitle</strong></a></span>

Span由一个名为CourseHeader的CSS类设置样式.当用户单击Span中的超链接时,我希望Span CSS类与另一个CSS类切换.

我有以下CSS元素

/********* Course Collaspable Headings ******/
.CourseHeader
{
    background-color: #F5F5F5; 
    border: 1px solid black; 
    display: inline-block; 
    width: 600px; 
    padding: 4px; 
    color: Black;
}

.CourseHeader.Black
{
    background-color: #000000;
    border: 1px solid black;
    display: inline-block;
    width: 600px;
    padding: 4px;
    color: #FFFFFF;
}

以下JQuery代码尝试在单击超链接后使Span更改样式

$("a.SubCourses").click(onSubCourses);

function onSubCourses() {

    $(".SpanHeader").toggleClass("Black");

}

我试着寻找其他人如何这一点,像这样的,但是我不能得到它的工作我自己.

有人可以帮忙吗？

谢谢.

Answer 1

它应该是,您id在HTML中使用了选择器<span id="SpanHeader" class="CourseHeader">

$("#SpanHeader").toggleClass("Black");

代替

 $(".SpanHeader").toggleClass("Black");