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");

}

我已经尝试过看别人是如何实现这一目标的，like this但是我无法让自己发挥作用。

有人可以帮忙吗？

感谢。

Answer 1

应该是，您在HTML id

中使用了<span id="SpanHeader" class="CourseHeader">选择器

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

而不是

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

Answer 2

首先，如果您不需要重复使用该函数，则可以简化该函数，然后它是一个ID而不是一个类，因此它应该是#SpanHeader

$("a.SubCourses").click(function() {

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

});

Answer 3

你在id

的css选择器中遇到了一个小错误

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

我创造了一个小提琴http://jsfiddle.net/26dUe/

Answer 4

您正在选择DOM中不存在的类.SpannerHeader元素。相反，您应该按ID进行选择。

如下：

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

function onSubCourses(e) {
    e.preventDefault();
    $("#SpanHeader").toggleClass("Black");
}

<强> Here is working code.

Answer 5

SpanHeader是一个类。这是Id，只需更改

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

     function onSubCourses() {

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

}

更改跨度CSS类OnClick

5 个答案: