Помощ при програмиране, отговори на въпроси / Jquery / CSS клас не работи както се очаква [затворен] - jquery, css

CSS клас не работи както се очаква [затворен] - jquery, css

Моите HTML кодове не реализират CSS стайлинга. Границите в CSS файла не се прилагат. Опитах и двете в Firefox & IE. Моля, предоставете своите данни.

Моля, намерете кода по-долу:

HTML

<html>
<head>
<link href="file://c:/jquery/chapter-1/begin/styles/my_style.css" rel="stylesheet">
</head>
<body>
<div id="header" class="no_hover"><h1>Header</h1></div>
<button type="button" id="btn1">Click to Add</button>
<button type="button" id="btn2">Click to Remove</button>
<script src="file://c:/jquery/chapter-1/begin/scripts/jquery.js"    type="text/javascript"></script>
<script src="file://c:/jquery/chapter-1/begin/scripts/test4.js" type="text/javascript"></script>
</body>
</html>

jS ФАЙЛ

$(document).ready(function() {
$("#btn1").click( function(){
$("#header").addClass("hover");
$("#header").removeClass("no_hover");
});
$("#btn2").click( function(){
$("#header").removeClass("hover");
$("#header").addClass("no_hover");
});
});

CSS FILE

.hover{
border: solid #f00 3px;
}
.no_hover{
border: solid #000 3px;
}

Отговори:

1 за отговор № 1

Ето някои кодове, които да ви помогнат с вашия jQuery илиза да го почисти. Не се гмурвайте в DOM многократно. Ако след това създадете променлива. Също така можете да веригирате събитията си. Изглежда, че току-що стартирате jQuery, така че когато се ввлечете повече в него, ще научите това. Надявам се това да помогне.

JSFiddle

$(document).ready(function() {
var header = $("#header");

$("#btn1").on("click", function() {
header.addClass("hover").removeClass("no_hover");
});
$("#btn2").on("click", function() {
header.removeClass("hover").addClass("no_hover");
});
});

4 за отговор № 2

Проблемът вероятно е във факта, че се свързвате към файловете като пътища към файловата система ... искате вместо това да свържете към CSS и JS файлове като виртуални пътеки от вашия уеб сървър.

Кодът ви работи. Вижте тази скрипка: http://jsfiddle.net/pratik136/x4zda/

0 за отговор № 3

Работи добре, когато локализирате вашия js и CSS файлове.

Вижте тази JSFiddle

Опитайте следния код, който включва всичко в една страница.

<html>
<head>
<style type="text/css">
#header {}
.hover{
border: solid #f00 3px;
}
.no_hover{
border: solid #000 3px;
}
</style>
</head>

<body>

<div id="header" class="no_hover"><h1>Header</h1></div>
<button type="button" id="btn1">Click to Add</button>
<button type="button" id="btn2">Click to Remove</button>



<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {
$("#header").addClass("hover");
$("#header").removeClass("no_hover");
});
$("#btn2").click(function() {
$("#header").removeClass("hover");
$("#header").addClass("no_hover");
});
});
</script>
</body>
</html>