<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選項卡效果代碼演示</title> </head> <body>
<mce:style type="text/css"><!-- div.card div{ background-color:#FF8000; float:left; padding:1px; padding-bottom:0; clear:both; width:405px; } div.card a{ color:black; font-size:14px; text-decoration:none; float:left; width:100px; text-align:center; background-color:white; margin-right:1px; } div.card div.home a.home{ font:normal normal bold 14px/1.5 宋體; } div.card div.international a.international { font:normal normal bold 14px/1.5 宋體; } div.card div.sport a.sport{ font:normal normal bold 14px/1.5 宋體; } div.card div.finance a.finance{ font:normal normal bold 14px/1.5 宋體; } div.card div.content{ background-color:white; border:1px solid #ff8000; height:100px; } --></mce:style><style type="text/css" mce_bogus="1">div.card div{ background-color:#FF8000; float:left; padding:1px; padding-bottom:0; clear:both; width:405px; } div.card a{ color:black; font-size:14px; text-decoration:none; float:left; width:100px; text-align:center; background-color:white; margin-right:1px; } div.card div.home a.home{ font:normal normal bold 14px/1.5 宋體; } div.card div.international a.international { font:normal normal bold 14px/1.5 宋體; } div.card div.sport a.sport{ font:normal normal bold 14px/1.5 宋體; } div.card div.finance a.finance{ font:normal normal bold 14px/1.5 宋體; } div.card div.content{ background-color:white; border:1px solid #ff8000; height:100px; }</style>
<mce:script type="text/javascript"><!-- //生成一個shq空對象 var shq={} shq.cmenu=function(e) { //兼容ie和firefox //如果是ie則e=window.event.srcElement, 否則e=e.target var e = window.event ? window.event.srcElement:e.target; // /a/i, 標識一個匹配a或者A的正則, 判斷e.tagName即標籤名是不是<a /> if(/a/i.test(e.tagName)){ //觸發事件的a標籤class屬性賦給它的父標籤id="menu"的class屬性 e.parentNode.className=e.className; //觸發事件的a標籤裏的內容賦給它的父標籤的下一個兄弟元素id="content" e.parentNode.nextSibling.innerHTML=e.innerHTML; e.parentNode.nextSibling.style.cssText='border-top:none'; //使a標籤失去焦點,其實就是去除虛線框 e.blur(); } } // --></mce:script>
</head> <body> <div class="card" id="main"> <div id="menu" οnclick="shq.cmenu(event)"> <a href="#" mce_href="#" class="home">國內</a> <a href="#" mce_href="#" class="international">國際</a> <a href="#" mce_href="#" class="sport">體育</a> <a href="#" mce_href="#" class="finance">財經</a> </div> <div class="content" id="content"> </div> </div> </body> </html>
{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ
{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr
{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"概述"}]},{"t
{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"t
{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言"}]},{"t