触发式导航栏又称选项卡导航栏,在WEB中的实现:
<Style type="text/css" />
body,td,th,form {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
input,select,textarea{
font-size: 11px;
}
#navigation {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0080C0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#navigation a {
padding-right: 6px;
padding-left: 6px;
line-height: 20px;
border: 1px solid #0080C0;
text-decoration: none;
padding-top: 2px;
padding-bottom: 2px;
background-color: #FFCC66;
}
#navigation .s {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #0080C0;
border-right-color: #0080C0;
border-bottom-color: #FFFFFF;
border-left-color: #0080C0;
background-color: #FFFFFF;
}
#navigation a:link {
color: #0080C0;
}
#navigation a:visited {
color: #0080C0;
}
#navigation a:hover {
color: #0080C0;
}
#navigation a:active {
color: #0080C0;
}
</style>
<br>
<div id="navigation">
<a href="#" class="s" onclick="return navigation_switch(this)">Home</a>
<a href="#" onclick="return navigation_switch(this)">Newsletter</a>
<a href="#" onclick="return navigation_switch(this)">History</a>
<a href="#" onclick="return navigation_switch(this)">Email List</a>
<a href="#" onclick="return navigation_switch(this)">Group</a>
<a href="#" onclick="return navigation_switch(this)">Template</a>
</div>
<br>
<script>
//JavaScript Document
//Author: Simon Zhang
//Date: 3 Jun 2007
//Compatibility: IE6+,FF2+//Set all option card is unselete.
function navigation_clear(){
var div = document.getElementById("navigation");
var as = div.getElementsByTagName("a");
for(var i = 0; i < as.length; i++ ){
    var a = as[i];
    a.className = "";
}
}//Switch style of card    just click .
function navigation_switch( sender ){
var key = sender.text ? sender.text : sender.innerText;
navigation_clear();
sender.className="s";
write_cookie( "navigation", key ); 
//If have Ajax,Please set the return value to false.
return true;
}
function navigation_reset(){
var key = read_cookie("navigation");
if( key ){
    var div = document.getElementById("navigation");
    var as = div.getElementsByTagName("a");
    for(var i = 0; i < as.length; i++ ){
     var a = as[i];
     var text = a.text ? a.text : a.innerText;
     if( text == key ){
      a.className = "s";
     }else{
      a.className = "";
     }
    }
}
}function write_cookie(name, value, hours){
var expire = "";
if(hours != null){
    expire = new Date((new Date()).getTime() + hours * 3600000);
    expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire;
}function read_cookie(name){
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0){ 
    offset = document.cookie.indexOf(search);
    if (offset != -1){ 
     offset += search.length;
     end = document.cookie.indexOf(";", offset);
     if (end == -1){
      end = document.cookie.length;
     }
     cookieValue = unescape(document.cookie.substring(offset, end))
    }
}
return cookieValue;
}
//Reset the current navigation from Cookie of value when page refreshed.
navigation_reset();
</script>
浏览的时候IE会弹出安全警告,没关系,允许就OK了;
fieldset:经常被忽视的一个HTML标签;
<html>

<body>

<fieldset>
<legend>
Health information:
</legend>
<form>
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>

<p>
If there is no border around the input form, your browser is too old.
</p>

</body>
</html>
通过<fieldset>标签就能够实现在桌面应用程序中表单的那个框框了