触发式导航栏又称选项卡导航栏,在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>标签就能够实现在桌面应用程序中表单的那个框框了