JavaScript удаляет всю информацию о стиле CSS

Question

JavaScript удаляет всю информацию о стиле CSS

0

Я новичок в веб-разработке. Итак, я только что создал образец веб-страницы. Он содержит html-страницу, файл css и файл JavaScript. Но всякий раз, когда этот JavaScript связан с html-страницей, форматы css удаляются. Это происходит только после соединения JS файла. Если одна и та же ссылка удалена, css работает нормально. мог бы и рассказать мне о проблеме. Я использую Windows XP SP3 и Google Chrome. это проблема с браузером.

Вот мои коды

HTML

<!doctype html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css" media="all">
</head>
<body
<div>
<ul id="nav">
            <li id="click" <a href="#">Contact</a></li>
            <li <a href="#">Blog</a></li>
            <li <a href="#">Work</a></li>
            <li <a href="#">About</a></li>
            <li <a href="#">Home</a></li>
</ul>
</div>
</body>
</html>

JS

var list = document.getElementById("nav")
list.addEventListener("click", function(event) {
switch(event.target.id) {
case "click":
document.title="I changed the document title";
break;
}, false);

CSS

body {
margin: 0;
}
#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav li {
    width: 20%;
    float: left;
    text-align: center;
    display: inline;
}
#nav li a {
line-height: 40px;
    display: block;
    padding: 0.5em 5px;
    text-decoration: none;
    font-weight: bold;
    color: #F2F2F2;
    -webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
    box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
    background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
    background-color: #326773;
}

user2899508 20 окт. 2013, в 09:08

Источник

3

Откройте инструменты dev в своем браузере (например, F12 в IE) и посмотрите, есть ли что-нибудь интересное в консоли (например, «кто-то не хочет закрывать фигурные скобки») ...
Alexei Levenkov 20 окт. 2013, в 07:02
2

Я бы порекомендовал исправить открывающий тег <body> - в настоящее время он отображается как <body , пропуская заключительную скобку > . РЕДАКТИРОВАТЬ В ваших открывающих тегах <li> также отсутствует конечная скобка.
Nightfirecat 20 окт. 2013, в 07:02
0

Я думаю, что есть проблема с CSS. ты видишь?
user2899508 20 окт. 2013, в 07:04
0

@ user2899508 Сначала исправьте проблемы с разметкой.
idmean 20 окт. 2013, в 07:04
0

body и тег li не закрыты ..
Joke_Sense10 20 окт. 2013, в 07:04

Показать ещё 3 комментария

Теги:

javascript

html

css

2 ответа

Ещё вопросы

Откройте инструменты dev в своем браузере (например, F12 в IE) и посмотрите, есть ли что-нибудь интересное в консоли (например, «кто-то не хочет закрывать фигурные скобки») ...
Я бы порекомендовал исправить открывающий тег <body> - в настоящее время он отображается как <body , пропуская заключительную скобку > . РЕДАКТИРОВАТЬ В ваших открывающих тегах <li> также отсутствует конечная скобка.
Я думаю, что есть проблема с CSS. ты видишь?
@ user2899508 Сначала исправьте проблемы с разметкой.

Nightfirecat · Answer 1 · 2013-10-20T04-58-00.000Z

Сделал это ответ, так как после тестирования в JSFiddle и сравнения его с фиксированной версией, я подозреваю, что это источник ваших проблем:

Я бы рекомендовал установить ваши теги <body> и <li> - в настоящее время они отображаются как <body и <li соответственно, без их конечных фигурных скобок (>).
Вот как выглядит ваш HTML-код после устранения проблемы:

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="JavaScript.js"></script>
    <link rel="stylesheet" type="text/css" href="Style.css" media="all">
</head>
<body>
<div>
<ul id="nav">
    <li id="click"><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Home</a></li>
</ul>
</div>
</body>
</html>

но, щелкнув по li с идентификатором click, вы не сможете изменить заголовок документа.
@ user2899508 Это может быть по ряду причин, но это совсем другой вопрос. (ваши нагрузки Javascript перед DOM делает, это event.target.type является "" , и т.д.)
Итак, что я должен сделать, чтобы загрузить JavaScript после загрузки DOM. где я должен разместить эту ссылку?
@ user2899508 Я не хочу показаться грубым, но вам следует задать еще один вопрос о том, почему не удается выделить ваши проблемы.

Alex Art. · Answer 2 · 2013-10-20T04-52-00.000Z

Прежде всего, вы не закрываете свой тег ссылки, это должно быть:

<link rel="stylesheet" type="text/css" href="Style.css" media="all" />

Теперь о вашей проблеме. Я думаю, что у вас есть проблема с вашим исходным кодом JavaScript. Убедитесь, что в средствах разработки ваш <script type="text/javascript" src="JavaScript.js"></script> фактически возвращает скрипт - убедитесь, что srs указывает на правильное расположение скрипта