jQuery的.toggleClass不工作

-2

$(document).ready(function() { 
    $("div").hover(function(){ 
     $(this).toggleClass("multi") 
    } 
}

文件名是stylesheet.css中

a{ 
text-decoration:none; 
color:green; 
} 
a:hover{ 
text-decoration:none; 
color:blue; 
} 
a:visited{ 
text-decoration:none; 
color:green; 
background-color:red; 
} 
div{ 
font-family:Garamond; 
border:3px solid blue; 
width:75px; 
height:45px; 
margin:3px; 
a:nth-child(5) div{ 
border-color:red; 
} 
.multi{ 
border-image: -webkit-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%; 
border-image: -ms-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%; 
border-image: -moz-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%; 
width:120px 
}

文件名是index.html的

<!DOCTYPE html> 
<html> 
<head> 
<script type='text/javascript' src='index.js'></script> 
<link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
<a href="http://www.criticalsoftware.com/en/homepage"><img src="http://tse3.mm.bing.net/th?id=OIP.M6306c8d673012b728da1d23d43adbcdfo0&w=134&h=135&c=7&rs=1&qlt=90&o=4&pid=1.1"/></a> 
</head> 
<body> 
<a href="day1.html"><div><h1>day 1</h1></div></a> 
<a href="day2.html"><div><h1>day 2</h1></div></a> 
<a href="day3.html"><div><h1>day 3</h1></div></a> 
<a href="day4.html"><div><h1>day 4</h1></div></a> 
<a href="finalday.html"class=""><div><h1>final day</h1></div></a>

的jQuery是对结果页面没有影响。我已经包含了所有可能影响div的CSS。任何帮助将不胜感激。

来源

2016-07-14 Ben Hemmings

你能再现问题上的jsfiddle？ –

您的CSS和JS中有一些语法错误 - 缺少右括号和大括号。解决这些问题，你会得到这个：https://jsfiddle.net/RoryMcCrossan/4nnntp35/。另外请注意，在这里不需要JS，因为您可以使用'：hover' CSS选择器来实现此目的 –

您是否在HTML中包含了jQuery？ – str

试试这个！

$(document).ready(function() {  
 
    $("div").hover(function(){ 
 
     $(this).addClass("multi"); 
 
    }, function(){  
 
     $(this).removeClass("multi"); 
 
    }); 
 
});

a{ 
 
    text-decoration:none; 
 
    color:green; 
 
} 
 
a:hover{ 
 
    text-decoration:none; 
 
    color:blue; 
 
} 
 
a:visited{ 
 
    text-decoration:none; 
 
    color:green; 
 
    background-color:red; 
 
} 
 
div{ 
 
    font-family:Garamond; 
 
    border:3px solid blue; 
 
    width:120px; 
 
    height:45px; 
 
    margin:3px; 
 
} 
 
h1{ 
 
    margin:0px; 
 
} 
 
a:nth-child(5) div{ 
 
    border-color:red; 
 
} 
 
.multi{ 
 
    border-image: -webkit-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%; 
 
    border-image: -ms-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%; 
 
    border-image: -moz-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%; 
 
    width:200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<a href="day1.html"><div><h1>day 1</h1></div></a> 
 
<a href="day2.html"><div><h1>day 2</h1></div></a> 
 
<a href="day3.html"><div><h1>day 3</h1></div></a> 
 
<a href="day4.html"><div><h1>day 4</h1></div></a> 
 
<a href="finalday.html"class=""><div><h1>final day</h1></div></a>

来源

2016-07-14 12:49:52 therealbischero

你有语法错误附近收盘document.read y和.hover()事件：

在CSS中还需要检查所有的花括号：

$(document).ready(function() { 
 
    $("div").hover(function(){ 
 
     $(this).toggleClass("multi"); 
 
    }); // close braces like this 
 
}); // close braces like this

a{ 
 
text-decoration:none; 
 
color:green; 
 
} 
 
a:hover{ 
 
text-decoration:none; 
 
color:blue; 
 
} 
 
a:visited{ 
 
text-decoration:none; 
 
color:green; 
 
background-color:red; 
 
} 
 
div{ 
 
font-family:Garamond; 
 
border:3px solid blue; 
 
width:120px; 
 
height:45px; 
 
margin:3px; 
 
    } /* Add here closing bracket*/ 
 
h1{ 
 
margin:0px; 
 
} 
 
a:nth-child(5) div{ 
 
border-color:red; 
 
} 
 
.multi{ 
 
border-image: -webkit-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%; 
 
border-image: -ms-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%; 
 
border-image: -moz-linear-gradient(left, #ff0000, #00ff00 50%, #0000ff 75%)1%; 
 
width:200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<a href="day1.html"><div><h1>day 1</h1></div></a> 
 
<a href="day2.html"><div><h1>day 2</h1></div></a> 
 
<a href="day3.html"><div><h1>day 3</h1></div></a> 
 
<a href="day4.html"><div><h1>day 4</h1></div></a> 
 
<a href="finalday.html"class=""><div><h1>final day</h1></div></a>

来源

2016-07-14 11:48:02

你错过了'hover（）'函数，CSS也有问题。 –

@RoryMcCrossan是的右大括号在css中也没有 –

jQuery的.toggleClass不工作

回答

相关问题