Проблема со страницей css
Код, который я вставил ниже, предназначен для отображения изображений на двух средних ссылках без текста и возврата к тексту на сбросе и четвертой ссылке. Я установил display: none только для тега span, но он ничего не делает. Есть ли способ сделать то, что я хочу, просто, без использования фреймворка?
изменить: пример
<html>
<head>
<style type = "text/css">
.class1{color:#000; background-image:url('1.jpg');}
.class1 span { display: none;}
.class2{color:#00f; background-image:url('2.jpg');}
.class2 span { display: none;}
.class3{color:#0f0; background-image:url('1.jpg');}
.class3 span { display: none;}
.class4{color:#f00;}
</style>
</head>
<body>
<script type = "text/javascript">
function sbox(divid, classname)
{
document.getElementById(divid).className=classname;
}
</script>
<div>
<a href = "#" onclick = "sbox('div1','class1');return false;">Reset</a><br/>
<a href = "#" onclick = "sbox('div1','class2');return false;">try here</a><br/>
<a href = "#" onclick = "sbox('div1','class3'); return false;">or here</a><br/>
<a href = "#" onclick = "sbox('div1','class4');return false;">or maybe here</a>
</div>
<div id = "div1" class = "class4"><span id = "div1_text">Blah blah blah</span></div>
</body>
</html>
Вам не хватает указанного примера.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Атрибут rel должен описывать отношение ссылки к текущему документу. Он должен иметь одно из описанных значений здесь. DIV - это группирующий элемент на уровне блока, тогда как SPAN - это встроенный группирующий элемент. SPAN позволяют группировать текст и теги вместе для некоторых целей (общие стили и т. д.) Без изменения потока разметки.
Обновлено: Вопрос изменился из-под меня, поэтому вышеизложенное кажется действительно не связанным с текущим контекстом.
Вам нужно сделать, как говорит @llandril, и указать размер DIV. Я бы посоветовал задать для DIV фиксированную ширину и высоту - либо всегда, либо когда используется один из классов, отображающих изображение. Используйте ширину и высоту фонового изображения, если хотите, чтобы все отображалось целиком. Возможно, вам также понадобится добавить немного содержания, но я так не думаю.
Я думаю, вот как будет выглядеть class1. Я этого не проверял.
/* in case color needs to apply to other elements */
.class1 { color: #000; }
div .class1 {
background-image:url('1.jpg');
width: 60px;
height: 30px;
}
div .class1 span { display: none;}
Он не должен менять порядок своих селекторов. Он хочет изменить отображение диапазона внутри объекта с классом css "class1", а не отображение объекта с классом "class1", расположенного в пределах диапазона. Порядок его селекторов соответствует тому, что он пытается сделать.
Я понимаю что ты имеешь ввиду. Думаю, я неправильно прочитал пример и предположил, что диапазон также был class1. Фактически он сопоставляет любой элемент с className class1, который содержит диапазон. Я стараюсь быть более точным со своими правилами. Обновил мой пример.
Атрибут rel обычно не используется многими UA (пользовательскими агентами), однако он указывает, какое отношение имеет связанная страница к текущей странице.
Некоторые псевдостандарты появляются повсюду, например, Mozilla использует отношение предварительной выборки для предварительной загрузки страниц. Google устанавливает [раньше устанавливал?] Свои первые несколько результатов для предварительной выборки таким образом, чтобы эти страницы загружались быстрее.
Другими примерами являются панели навигации на основе браузера (например, в Opera есть одна из них) со ссылками на следующую, предыдущую, страницы содержимого и т. д. Это также относится к элементу <link>.
Тег div включает в себя блок содержимого. Тег span похож, но включает встроенный контент. Разница? Вы можете использовать span для стилизации фразы внутри абзаца, но div, чтобы обернуть этот абзац и отделить его от других. Смотрите это для div и это для промежутков.
После некоторых комментариев: вот он, изо рта лошади:
The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
Некоторое время, потраченное на просмотр сайта w3schools.com, может быть очень полезным для всех, кто изучает этот материал.
Я не люблю w3schools. На самом деле мне легче просматривать официальную спецификацию на w3.org.
Некоторое время, потраченное на просмотр сайта w3schools.com, научит вас нестандартной информации и поможет выработать уйму вредных привычек.
rel также может использоваться для описания другой семантики, см. микроформаты, относящиеся к документам
Обычно атрибуты rel и rev описывают прямые и обратные ссылки соответственно. Например, при разбивке на страницы списков можно использовать <a href = "..." rel = "next">Next</a> и <a href = "..." rev = "prev">Prev</a>.
См. http://www.w3.org/TR/html401/types.html#type-links для некоторых значений, которые вы можете использовать.
Другие люди объяснили теги span / div. На самом деле, случаев использования тегов span не так уж и много, поскольку обычно вы можете обойтись такими элементами фразы, как em, strong, code и т. д., В зависимости от контекста.
опечатка: rev = "prev" должно быть rel = "prev"
Нет, не должно. Прочтите мой пост еще раз. См. Также: w3.org/TR/html401/struct/links.html#h-12.3.1
DIV не отображает фоновое изображение, потому что у него нет содержимого, когда ваш диапазон исчез.
Добавление неразрывного пробела (& nbsp;) после диапазона даст ему содержимое.
Думаю нужно поправить форматирование вопроса.