簡單的tab卡
修改了一個樣式javascript
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js </title>
<style type="text/css">
* {margin:0; padding:0; list-style:none; }
body{font:12px/1.5 Tahoma;}
#outer{width:500px;margin:10px auto; }
#tab{background-color:#000;border:1px solid black;}
#tab li{color:#fff;width:50px;padding:5px;display:table-cell;}
#tab li.current{color:#111;background-color:#eee; }
#content{border:1px solid #000;}
#content ul{display:none;padding:25px;}
</style>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">第一課</li>
<li>第二課</li>
<li>第三課</li>
</ul>
<div id="content">
<ul style="display:block;">
<li>網頁特效原理分析</li>
<li>響應用戶操做</li>
<li>提示框效果</li>
<li>事件驅動</li>
<li>元素屬性操做</li>
<li>動手編寫第一個JS特效</li>
<li>引入函數</li>
<li>網頁換膚效果</li>
<li>展開/收縮播放列表效果</li>
</ul>
<ul>
<li>改變網頁背景顏色</li>
<li>函數傳參</li>
<li>高重用性函數的編寫</li>
<li>126郵箱全選效果</li>
<li>循環及遍歷操做</li>
<li>調試器的簡單使用</li>
<li>典型循環的構成</li>
<li>for循環配合if判斷</li>
<li>className的使用</li>
<li>innerHTML的使用</li>
<li>戛納印象效果</li>
<li>數組</li>
<li>字符串鏈接</li>
</ul>
<ul>
<li>JavaScript組成：ECMAScript、DOM、BOM，JavaScript兼容性來源</li>
<li>JavaScript出現的位置、優缺點</li>
<li>變量、類型、typeof、數據類型轉換、變量做用域</li>
<li>閉包：什麼是閉包、簡單應用、閉包缺點</li>
<li>運算符：算術、賦值、關係、邏輯、其餘運算符</li>
<li>程序流程控制：判斷、循環、跳出</li>
<li>命名規範：命名規範及必要性、匈牙利命名法</li>
<li>函數詳解：函數構成、調用、事件、傳參數、可變參、返回值</li>
<li>定時器的使用：setInterval、setTimeout</li>
<li>定時器應用：站長站導航效果</li>
<li>定時器應用：自動播放的選項卡</li>
<li>定時器應用：數碼時鐘</li>
<li>程序調試方法</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
//jQ版本
/*
$(function(){
var _tab = $('ul.tabnav>li');//獲取選項卡導航
var _box = $('.tabbox>div');//獲取內容切換區
var _hover = 'hover';//當前點擊顯示的樣式
var _index;//索引值
_tab.click(function(){
_index = _tab.index(this);//獲取當前點擊的索引值
$(this).addClass(_hover).siblings().removeClass(_hover);//當前點擊高亮顯示
_box.eq(_index).show().siblings().hide();//經過索引值讓對應的選項內容區顯示
}).eq(0).click();//爲第一個導航添加當前狀態樣式
});
*/
$(document).ready(function(){
$("#tab li").hover(function(){
$(this).addClass("current").siblings().removeClass("current")
$("#content ul").eq($(this).index()).show().siblings().hide()
})
})
</script>
<!--
<script type="text/javascript">
window.onload=function (){
var tab=document.getElementById("tab").getElementsByTagName("li")
var con=document.getElementById("content").getElementsByTagName("ul")
for (var i = 0,l=tab.length;i<l ;i++ ) {
tab[i].index=i
tab[i].onmouseover=function (){
for (var n=0,m=tab.length;n<m ;n++ ) {tab[n].className="";this.className="current"}
for (var n=0,m=con.length;n<m ;n++ ) {con[n].style.display="none";con[this.index].style.display="block"}
}
}
}
</script>
-->
</body>
</html>
相關文章
- 1. tab 簡單的tab
- 2. 簡單的tab選項卡切換
- 3. jQery簡單Tab選項卡效果
- 4. js tab選項卡 mootools tab選項卡
- 5. TAB選項卡
- 6. 選項卡TAB
- 7. Tab選項卡
- 8. tab選項卡
- 9. 簡單純js實現網頁tab選項卡切換效果
- 10. 微信小程序實現Tab選項卡（極簡單版）
- 更多相關文章...
- • ionic tab(選項卡) - ionic 教程
- • ionic 卡片 - ionic 教程
- • Github 簡明教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. tab 簡單的tab
- 2. 簡單的tab選項卡切換
- 3. jQery簡單Tab選項卡效果
- 4. js tab選項卡 mootools tab選項卡
- 5. TAB選項卡
- 6. 選項卡TAB
- 7. Tab選項卡
- 8. tab選項卡
- 9. 簡單純js實現網頁tab選項卡切換效果
- 10. 微信小程序實現Tab選項卡（極簡單版）