用YUI做了個標(biāo)簽瀏覽效果
更新時間：2007年02月20日 00:00:00 作者：
在這里先要感謝yahoo的工程師們無私的將他們的成果奉獻出來——yui（yahoo! ui）
其實這是它自帶的一個例子，我只是熟悉了一下，各種接口調(diào)用還是比較方便的
瀏覽：http://www.healdream.com/upload/html/tabview_test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>TabView Test</title>
<link rel="stylesheet" type="text/css" href="tabview1.css">
<link rel="stylesheet" type="text/css" href="border_tabs1.css">
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="tabview.js"></script>
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
YAHOO.example.init = function() {
var tabView = new YAHOO.widget.TabView('demo');
tabView.on('contentReady', function() {
obj=document.getElementById("nav");
dest=obj.getElementsByTagName("li");
for(var i=0;i<dest.length;i++){
this.getTab(i).set('activationEvent', 'mouseover');
}
});
};
YAHOO.example.init();
</script>
<style>
#demo{
border:1px solid #000000;
width:40%;
background-color:#c0c0c0;
padding:5px;
}
.yui-navset.yui-content{
padding:10px;
height:200px;
}
</style>
<div id="demo" class="yui-navset">
<ul class="yui-nav" id="nav">
<li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
<li><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div><p>Tab One Content</p></div>
<div><p>Tab Two Content</p></div>
<div><p>Tab Three Content</p></div>
</div>
</div>
相對來說，代碼已經(jīng)很精煉了，相對其他相同效果的網(wǎng)頁來說
其實這是它自帶的一個例子，我只是熟悉了一下，各種接口調(diào)用還是比較方便的
瀏覽：http://www.healdream.com/upload/html/tabview_test.html
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>TabView Test</title>
<link rel="stylesheet" type="text/css" href="tabview1.css">
<link rel="stylesheet" type="text/css" href="border_tabs1.css">
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="tabview.js"></script>
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
YAHOO.example.init = function() {
var tabView = new YAHOO.widget.TabView('demo');
tabView.on('contentReady', function() {
obj=document.getElementById("nav");
dest=obj.getElementsByTagName("li");
for(var i=0;i<dest.length;i++){
this.getTab(i).set('activationEvent', 'mouseover');
}
});
};
YAHOO.example.init();
</script>
<style>
#demo{
border:1px solid #000000;
width:40%;
background-color:#c0c0c0;
padding:5px;
}
.yui-navset.yui-content{
padding:10px;
height:200px;
}
</style>
<div id="demo" class="yui-navset">
<ul class="yui-nav" id="nav">
<li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
<li><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div><p>Tab One Content</p></div>
<div><p>Tab Two Content</p></div>
<div><p>Tab Three Content</p></div>
</div>
</div>
相對來說，代碼已經(jīng)很精煉了，相對其他相同效果的網(wǎng)頁來說
相關(guān)文章
深入淺出ES6新特性之函數(shù)默認參數(shù)和箭頭函數(shù)
這篇文章主要介紹了深入淺出ES6新特性之函數(shù)默認參數(shù)和箭頭函數(shù) 的相關(guān)資料,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了ES6實現(xiàn)圖片切換特效代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
javascript中使用css需要注意的地方小結(jié)
javascript中使用css需要注意的地方小結(jié)，注意保留字問題。2010-09-09
js中常常用到innerHTML,其作用就是獲取到標(biāo)簽里面的內(nèi)容,同時也可以為標(biāo)簽添加內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于JavaScript中innerHTML使用方法的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了JavaScript類繼承及實例化的方法,較為詳細的分析了javascript擴展類、實例化類及類對象與成員函數(shù)的使用技巧,需要的朋友可以參考下2015-07-07
JS觸發(fā)事件event.target VS event.currentTarget實例
這篇文章主要介紹了JS觸發(fā)事件event.target VS event.currentTarget實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
用js獲取本地電腦信息（但是只能在IE瀏覽器下才行，其他瀏覽器其獲取不到的）2013-01-01
弄了個很簡單的例子判斷IE瀏覽器版本是否過低，注意在IE6和IE7版本較低情況下下才看到它的提示效果，需要的朋友可以收藏下2013-11-11
js保留兩位小數(shù)使用toFixed實現(xiàn)
直接使用Math.round(x*100)存在一個問題，有時會有很小的誤差，顯示很多位的小數(shù)位，如0.9996*100，就會變成99.96000000000001，我想要的在下面，感興趣的朋友可以參考下哈2013-07-07
本文主要介紹了JS中arguments的使用示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05