<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 新建网页 </title>
<style type="text/css">
#mylayer div{
display:none;
}
</style>
</head>
<body>
<select id="sel" οnchange="f(this);">
<option> a </option>
<option> b </option>
<option> c </option>
<option> d </option>
</select>
<div id="mylayer">
<div style="display:block;"> 层1 </div>
<div> 层2 </div>
<div> 层3 </div>
<div> 层4 </div>
</div>
<script language="javascript">
function f(obj){
var mylayers = document.getElementById("mylayer").getElementsByTagName("DIV");
for(var i=0; i <mylayers.length; i++){
mylayers[i].style.display = "none";
}
mylayers[obj.selectedIndex].style.display = "block";
}
</script>
</body>
-------------------------------------------------------
一些附加介绍:
<div id="div1" style="display:block">
opinion 1
</div>
就是给<div>标签命了一个id号,可以javascipt来控制这个层的样式之类的。
style"display:block"
就是给了这个<div>一个显示的样子。意思就是块,加了这个样式,一个元素会自动为一行,如果是链接的话,点击这个行任何地方都会有链接,而不只是点击链接的字才有链接,用言语很难表达明白。给你一个案例。
aa.htm文件里面的代码是
<style>
a{background:blue;display:block;color:#fff}
</style>
<a href="http://www.gift12345.com/">http://www.gift12345.com</a>
<a href="http://www.gift12345.com/">http://www.gift12345.com</a>
<a href="http://www.gift12345.com/">http://www.gift12345.com</a>
<a href="http://www.gift12345.com/">http://www.gift12345.com</a>
bb.htm文件里面的代码是
<style>
a{background:blue;color:#fff}
</style>
<a href="http://www.gift12345.com/">http://www.gift12345.com</a>
<a href="http://www.gift12345.com/">http://www.gift12345.com</a>
<a href="http://www.gift12345.com/">http://www.gift12345.com</a>
<a href="http://www.gift12345.com/">http://www.gift12345.com</a>
你分别测试这两段代码,对比一下就知道是什么意思了。
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)