Класс CSS не работает должным образом

-1

Мои HTML-коды не реализуют стиль CSS. Граница в файле CSS не выполняется. Я пробовал оба в Firefox & IE. Пожалуйста, укажите свои данные.Класс CSS не работает должным образом

Вы можете найти код ниже:

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 FILE

$(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; 
}

источник

2012-04-27 user1050619

ли консольная ошибка печать браузера об ошибке, что он не мог собрать таблицу стилей? Полагаю, что так. Возможно, это помогает добавить третий слэш за 'file: //'. – YMMD

Вам действительно нужно иметь два стиля? Если они переопределяют одно и то же (граница), вам нужно только отменить последовательность CSS .hover и .no_hover, а затем переключить .hover, поскольку он заменит .no_hover (обратный из-за вашего default .no_hover) –

I угадайте сокращение границы: border: 1px # 000 solid; – KBN

Ниже приведен код, который поможет вам с вашим 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"); 
    }); 
});

источник

2012-04-27 18:19:08 BuiltInOneDay

Проблема, вероятно, в том, что вы ссылки на файлы как пути к файловой системе ... вы хотите вместо этого ссылаться на файлы CSS и JS как виртуальные пути со своего веб-сервера.

Ваш код работает. См. Этот скрипт: http://jsfiddle.net/pratik136/x4zda/

источник

2012-04-27 17:07:00 bPratik

Я пробовал в вашей скрипке, но он не работает. Похоже на проблему с браузером. Мне нужно включить что-либо в моем браузере. – user1050619

какой браузер вы используете? Я пробовал в Chrome, FF и IE9 – bPratik

Он работает в Firefox-11.0, а не в IE-9. – user1050619

Работает отлично, когда вы локализуете js и CSS.

See this 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>

источник

2012-04-27 17:11:18 Samwise

Класс CSS не работает должным образом

ответ

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