JQuery .toggleClass не работает

-2

имя файла

является index.jsJQuery .toggleClass не работает

$(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 является не влияя на итоговую страницу. Я включил все css, которые могут повлиять на div. Любая помощь будет принята с благодарностью.

источник

2016-07-14 Ben Hemmings

Можете ли вы сделать JSFiddle, воспроизводящий проблему? –

У вас есть синтаксические ошибки в CSS и JS - отсутствуют закрывающие скобки и фигурные скобки. Исправьте их, и вы получите это: https://jsfiddle.net/RoryMcCrossan/4nnntp35/. Также обратите внимание, что JS здесь не требуется, так как вы можете использовать селектор CSS:: hover, чтобы достичь этого –

Включили ли вы jQuery в свой HTML? – 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 у и .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 не работает

ответ

Смежные вопросы