本文實(shí)例講述了JS實(shí)現(xiàn)完全語義化的網(wǎng)頁選項(xiàng)卡效果代碼。分享給大家供大家參考。具體如下：
這是一款完全語義化的JS網(wǎng)頁選項(xiàng)卡，包括了兩種用法，一種是點(diǎn)擊式，另一種是滑動(dòng)門式，具體用哪一種要根據(jù)你自己的需要了，滑動(dòng)門是在鼠標(biāo)經(jīng)過時(shí)觸發(fā)，選項(xiàng)卡則是需要鼠標(biāo)點(diǎn)擊的。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-yyh-web-tab-cha-nav-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>語義化的網(wǎng)頁選項(xiàng)卡</title><style type="text/css"> *{margin:0;padding:0;font-size:13px;line-height:1.5;} body{padding:20px;} .cur{color:#f60;border-bottom:1px solid #fff;font-weight:bold;background:#fff;cursor:default;} #tab_,dl{position:relative;float:left;height:100px;width:300px;} h4,dt{float:left;height:20px;margin:0 0 0 8px;display:inline;line-height:20px;width:60px;border:1px solid #ccc;position:relative;z-index:11;text-align:center;font-weight:normal;cursor:pointer;background:#eee;} .c,dd{position:absolute;top:21px;border:1px solid #ccc;left:0;width:250px;padding:20px;overflow:hidden;display:block;} #tab_{clear:left;} h1{clear:left;padding:10px 0} #tab_1.cur{color:#f60} #tab_2.cur{color:blue} #tab_3.cur{color:green}</style></head><body><h1>mouseover</h1><dl id="tab"> <dt>美國</dt> <dd>我都不怕</dd> <dt>朝鮮</dt> <dd>誰都怕我</dd> <dt>某國</dt> <dd>我誰都怕</dd></dl><h1>click</h1><div id="tab_"> <h4>orange</h4> <div class="c">桔紅</div> <h4>blue</h4> <div class="c">藍(lán)色</div> <h4>green</h4> <div class="c">綠色</div></div><script type="text/javascript">function id(elem) {return document.getElementById(elem)}function show(elem) {elem.style.display = "";}function hide(elem) {elem.style.display = "none";}function next( elem ) { do { elem = elem.nextSibling; } while ( elem && elem.nodeType != 1 ); return elem;}function tab(a, p) { var p = (p === undefined) ? {e:"onclick",n:1} : p, node = id(a).firstChild, x = []; p.e = (p.e === undefined) ? "onclick" : p.e; p.n = (p.n === undefined) ? 1 : p.n; node=(node.nodeType !== 1)?next(node):node; for (var i = 1, node; node; i++, node = next(node)) { x[i] = node; } for (var i = 1; x[i]; i++) { if(i % 2 == 0){hide(x[i]);x[i-1].id=a+(i/2)} x[p.n*2-1].className = "cur"; show(x[p.n*2]); temp = function (i) { if (i % 2 == 1) { x[i][p.e] = function () { for (var j = 1; x[j]; j++) { if (j % 2 == 0) { hide(x[j]); x[j-1].className = "" } } show(x[i+1]); x[i].className = "cur" } } else { return null } }(i) }}tab("tab",{e:"onmouseover",n:2});tab("tab_")</script></body></html>希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
