Javascript css页面问题
我在下面粘贴的代码旨在在中间的两个链接上显示图像,而不显示文本,并返回到重置和第四个链接上的文本。我已经为span标记设置了display:none,但它什么也不做。是否有什么方法可以简单地做我想要做的事情,而不使用框架 编辑:示例Javascript css页面问题,javascript,html,css,Javascript,Html,Css,我在下面粘贴的代码旨在在中间的两个链接上显示图像,而不显示文本,并返回到重置和第四个链接上的文本。我已经为span标记设置了display:none,但它什么也不做。是否有什么方法可以简单地做我想要做的事情,而不使用框架 编辑:示例 <html> <head> <style type="text/css"> .class1{color:#000; background-image:url('1.jpg')
<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>
.class1{color:#000;背景图像:url('1.jpg');}
.class1 span{显示:无;}
.class2{color:#00f;背景图像:url('2.jpg');}
.class2 span{显示:无;}
.class3{color:#0f0;背景图像:url('1.jpg');}
.class3 span{显示:无;}
.class4{颜色:#f00;}
函数sbox(divid,classname)
{
document.getElementById(divid).className=className;
}
废话废话
应该使用rel
属性来描述链接与当前文档的关系。它应该有一个描述的值。DIV是块级分组元素,而SPAN是内联分组元素。跨距允许您出于某种目的(通用样式等)将文本和标记分组在一起,而无需更改标记流
编辑:问题从我下面改过来了,因此上面的内容似乎与当前上下文完全脱节
你需要照@landril说的做,给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;}
rel
属性应该描述链接与当前文档的关系。它应该有一个描述的值。DIV是块级分组元素,而SPAN是内联分组元素。跨距允许您出于某种目的(通用样式等)将文本和标记分组在一起,而无需更改标记流
编辑:问题从我下面改过来了,因此上面的内容似乎与当前上下文完全脱节
你需要照@landril说的做,给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;}
rel属性通常不被许多UAs(用户代理)使用,但它指定链接页面与当前页面的关系 某些伪标准已经出现,例如Mozilla使用预加载页面。谷歌(Google)设置了它最初几个用这种方式预取的结果,以便这些页面加载更快
其他示例是基于浏览器的导航栏(例如Opera有一个导航栏),带有指向下一页、上一页、内容页等的链接。这也适用于
元素许多UAs(用户代理)通常不使用rel属性,但它指定链接页与当前页的关系
某些伪标准已经出现,例如Mozilla使用预加载页面。谷歌(Google)设置了它最初几个用这种方式预取的结果,以便这些页面加载更快
其他示例是基于浏览器的导航栏(例如Opera有其中一个),带有指向下一页、上一页、内容页等的链接。这也适用于
元素div标记包含一块内容。span标记类似,但包含内联内容。区别?可以使用span在段落中设置短语的样式,但可以使用div包装该段落并将其与其他段落分开。有关div和span,请参见
点评后:在这里,
DIV和SPAN元素,以及id和class属性,提供了一种向文档添加结构的通用机制。这些元素将内容定义为内联(SPAN)或块级(DIV),但不会对内容施加其他表示习惯用法。因此,作者可以将这些元素与样式表、lang属性等结合使用,以根据自己的需要和喜好定制HTML
div标记包含一块内容。span标记类似,但包含内联内容。区别?可以使用span在段落中设置短语的样式,但可以使用div包装该段落并将其与其他段落分开。有关div和span,请参见 点评后:在这里, DIV和SPAN元素,以及id和class属性,提供了一种向文档添加结构的通用机制。这些元素将内容定义为内联(SPAN)或块级(DIV),但不会对内容施加其他表示习惯用法。因此,作者可以将这些元素与样式表、lang属性等结合使用,以根据自己的需要和喜好定制HTML
rel
也可用于描述其他语义,请参见rel
也可用于描述其他语义,请参见通常,属性rel和rev分别描述前向和后向链接。例如,在列表分页中,可以使用
和
有关可以使用的一些值,请参见
其他人已经解释了span/div标记。实际上,使用span标记的情况并不多,因为您可以