最新久草在线久草在线,久草热精在线视频,亚洲久草综合国产

首頁免費課 Tab選項卡切換效果筆記

Tab選項卡切換效果

                
                Amy
            
                    查看講師更多課程 
                    Amy講師的其他課程
                
CSS3實現漂亮ToolTips效果
初級·42720
免費課程
                                
css3實現網頁平滑過渡效果
初級·54370
免費課程
                                
CSS3實現“圖片陰影”效果
初級·34771
免費課程
                                
DOM事件探秘
中級·99534
免費課程
                                
瀑布流布局
初級·97751
免費課程
                                
                難度初級
            
                時長 1小時34分
            
                學習人數
            
綜合評分9.73
                            233人評價
                        查看評價
                                9.9
                                內容實用
                            
                                9.8
                                簡潔易懂
                            
                                9.5
                                邏輯清晰

最熱最新

xyc9514736xyc

function $(id){
? ? return typeof id === 'string'?document.getElementById(id):id;
}
//給id單獨封裝一個函數，如果id為字符串的話，返回getElementById(id)否則返回id本身
//A=(B)?C:D上面是一般的形式，代表的含義是判斷B是否為真。若為真，返回A=C;反之，A=D；問號冒號語句一般是if語句的簡潔寫法

window.onload=function(){
var title = document.getElementById('menu').getElementsByTagName('p');
var list = document.getElementById('menu').getElementsByTagName('ul');
? ? ? // 將所有點擊的標題和要顯示隱藏的列表取出來
? ? ??
? ? ? if(title.length != list.length){
? ? ? ? ? return;
? ? ? }
? ? ? ? for(var i=0;i<title.length;i++){
? ? ? ? ? ? title[i].id = i;
? ? ? ? ? ? title[i].onclick = function(){
? ? ? ? ? ? ? ? for(var j=0; j<title.length; j++){
? ? ? ? ? ? ? ? ? ? list[j].style.display = "none";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.style.display = 'block';
? ? ? ? ? ? ? ? list[this.id].style.display = 'block';
? ? ? ? ? ? }
? ? ? ? }
? ? ?// 遍歷所有要點擊的標題且給它們添加索引及綁定事件

? ? ?// 獲取點擊的標題上的索引屬性，根據該索引找到對應的列表

? ? ?// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來
}

查看全部

0 采集收起來源：編程練習
2019-03-09
牧小土

<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{margin:0;
? ? ?padding:0;
? ? ?font-size:13px;
? ? ?list-style:none;
? ? ? ??
? ? }

.menu{width:210px;
? ? ? margin:50px auto;
? ? ? border:1px solid #ccc;}

.menu p{height:25px;
? ? ? ? line-height:25px;
? ? ? ? font-weight:bold;
? ? ? ? background:#eee;
? ? ? ? border-bottom:1px solid #ccc;
? ? ? ? cursor:pointer;
? ? ? ? padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
? ? ? ? ?line-height:24px;
? ? ? ? ?padding-left:5px;}
</style>
<script type="text/javascript">
function $(id){

? ? return typeof id==="string"?document.getElementById(id):id;
? ??
? ? }
window.onload=function(){

? ? ? // 將所有點擊的標題和要顯示隱藏的列表取出來
? ? ? var titles=$('menu').getElementsByTagName('p');
? ? ? var lists=$('menu').getElementsByTagName('ul');

? ? ?// 遍歷所有要點擊的標題且給它們添加索引及綁定事件
? ? ?for(var i=0;i<titles.length;i++) {
? ? ? ? ?titles[i].id=i;
? ? ? ? ?titles[i].onclick=function() {
? ? ? ? ? ? ?for(var j=0;j<titles.length;j++) {
? ? ? ? ? ? ? ? ?lists[j].style.display='none'
? ? ? ? ? ? ?}
? ? ? ? ? ? ?lists[this.id].style.display='block'
? ? ? ? ?}
? ? ?}

? ? ?// 獲取點擊的標題上的索引屬性，根據該索引找到對應的列表

? ? ?// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來

}
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p>Web前端</p>
<ul >
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后臺腳本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>

查看全部

0 采集收起來源：編程練習
2019-02-22
weibo_木夕木夕MEI_0

<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{margin:0;
? ? ?padding:0;
? ? ?font-size:13px;
? ? ?list-style:none;}

.menu{width:210px;
? ? ? margin:50px auto;
? ? ? border:1px solid #ccc;}

.menu p{height:25px;
? ? ? ? line-height:25px;
? ? ? ? font-weight:bold;
? ? ? ? background:#eee;
? ? ? ? border-bottom:1px solid #ccc;
? ? ? ? cursor:pointer;
? ? ? ? padding-left:5px;}

.menu div ul{display:none;}
/*.menu .active{
display: block;*/
}
.menu li{height:24px;
? ? ? ? ?line-height:24px;
? ? ? ? ?padding-left:5px;}
</style>
// <script src="../resources/js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

function $(id){
return typeof id==="string"?document.getElementById(id):id;
}
? window.onload=function(){
? ? ? // 將所有點擊的標題和要顯示隱藏的列表取出來
? ? ? var titles=$('menu').getElementsByTagName('p');
? ? ? var lists=$('menu').getElementsByTagName('ul');
? ? ?// 遍歷所有要點擊的標題且給它們添加索引及綁定事件
? ? ? for (var i=0;i<titles.length;i++) {
? ? ? ?titles[i].id=i;
? ? ? ?// 獲取點擊的標題上的索引屬性，根據該索引找到對應的列表
? ? ? ?titles[i].onclick=function(){
? ? ? ?//console.log(this.id);?
? ? ? ?for (var j=0;j<titles.length;j++) {?
? ? ? ?//關閉
if(this.id!=j){
lists[j].style.display='none';
}else{
// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來
lists[this.id].style.display=lists[this.id].style.display=='block'?"none":"block";
}
}

? ? ? ?}

? ? ? }
}
/* $(function(){
$("p").click(function(){
? ? ? $(this).siblings().toggleClass("active").parent().siblings().find("ul").removeClass("active");
? ? ?});
})*/

</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p class="menu-tit" id="menu-tit">Web前端</p>
?
<ul >
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后臺腳本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>

查看全部

0 采集收起來源：編程練習
2018-10-11
qq_慢才后生_ehCEY4

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hidden {
display: none;
}
.show {
display: inline-block;
}
</style>
<script type="text/javascript">
window.onload=function(){
var send=document.getElementById('send');
var inside = document.getElementById('inside');
times=60,
timer=null;
send.onclick=function () {
//計時開始即禁用send
send.setAttribute("disabled",true);
function www(){
// 顯示inside?
inside.className =? "show";
times--;
if(times<0) {
? clearInterval(i);
??
? //計時結束即重置啟用send，并隱藏inside
? send.disabled=false;
? times = 60;
? inside.className="hidden";
}
inside.value = times + "秒后重試";
}
var i = setInterval(www,1000); }
}
</script>
</head>
<body>
<input type="button" id="send" value="發送驗證碼">
<input type="button" id="inside" class= "hidden" disabled="disabled" value="計時">
</body>
</html>

查看全部

0 采集收起來源：編程練習
2018-08-20
qq_慢才后生_ehCEY4

<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{margin:0;
? ? ?padding:0;
? ? ?font-size:13px;
? ? ?list-style:none;}

.menu{width:210px;
? ? ? margin:50px auto;
? ? ? border:1px solid #ccc;}

.menu p{height:25px;
? ? ? ? line-height:25px;
? ? ? ? font-weight:bold;
? ? ? ? background:#eee;
? ? ? ? border-bottom:1px solid #ccc;
? ? ? ? cursor:pointer;
? ? ? ? padding-left:5px;}

/*
.menu div ul{display:none;}
*/

.menu li{height:24px;
? ? ? ? ?line-height:24px;
? ? ? ? ?padding-left:5px;}
.active {
display: block;
}
.hidden {
display: none;
}
</style>
<script type="text/javascript">

//window.onload=function(){

? ??
? ? ? // 將所有點擊的標題和要顯示隱藏的列表取出來
? ??
? ? ?// 遍歷所有要點擊的標題且給它們添加索引及綁定事件

? ? ?// 獲取點擊的標題上的索引屬性，根據該索引找到對應的列表

? ? ?// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來

//}

</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p id ="p0">Web前端</p>
<ul id= "ul0" class="active">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p id ="p1">后臺腳本</p>
<ul id= "ul1" class="hidden">
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p id ="p2">前端框架</p>
<ul id= "ul2" class="hidden">
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
<script>
/*
String.prototype.myReplace=function(f,e){//吧f替換成e
? ? var reg=new RegExp(f,"g"); //創建正則RegExp對象? ?
? ? return this.replace(reg,e);?
}
var tit = document.getElementById("menu").childNodes[1].childNodes[3];
? ? var uls = document.getElementsByTagName("ul");
var sp = tit.innerHTML.split('<li>').toString().split('</li>');
//document.write(tit.length);
for(var i=0;i<tit.length;i++){

document.write(tit[i]+"<br>");}
document.write(sp.toString().myReplace(',',''));

*/

var menu = document.getElementById("menu");?
for(var i=0;i<menu.getElementsByTagName("p").length;i++)
!(window.onload = function(i) {
document.getElementById("p"+i).onclick = function() {
if(document.getElementById("ul"+ i).className === "hidden"){
for(var j=0;j<menu.getElementsByTagName("ul").length;j++)
document.getElementById("ul"+ j).className = "hidden";

document.getElementById("ul"+ i).className = "active";
alert("1");
}
else if(document.getElementById("ul"+ i).className === "active"){
document.getElementById("ul"+ i).className = "hidden";
alert("2");
}
else? alert("出現錯誤！");
}
}(i));

/* var i=0;
document.write(document.getElementById("ul"+ i).className);*/
</script>
</body>
</html>

查看全部

0 采集收起來源：編程練習
2018-08-17

沒毛病慘就完事了

自己根據1-4AMY老師的代碼例案。
第一次接觸js自己寫的。如法炮制：

<script?type="text/javascript">
????function?$(id){
????????return?typeof?id=='string'?document.getElementById(id):id;
????}
????window.onload=function()?{
????????var?ps?=?$('menu').getElementsByTagName('p');
????????var?uls?=?$('menu').getElementsByTagName('ul');
????????for?(var?i?=?0;?i?<?uls.length;?i++)?{
????????????ps[i].id?=?i;
????????????ps[i].onclick?=?function?()?{
????????????????if(uls[this.id].style.display?==?'block')
????????????????return?uls[this.id].style.display?=?'none';
????????????????else
????????????????return?uls[this.id].style.display?=?'block';
????????????}
????????}
????}

</script>

查看全部

0 采集收起來源：編程練習

2018-07-25

Sandaydi 01:17

Tab切換類型

查看全部

0 采集收起來源：課程簡介
2018-07-21

首頁上一頁 1 2 3 4 5 6 7 下一頁尾頁

舉報

0/150

提交

取消

開始學習

課程須知: 1、您應該已經熟悉html標簽和css樣式表；2、您還應該已經熟悉JavaScript 或 jQuery的基礎知識。

老師告訴你能學到什么？: 您可以舉一反三，制作非常精美風格多樣的 Tab 切換效果，能夠幫助你豐富或改進網站中的選項卡功能的用戶體驗。

微信掃碼，參與3人拼團

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Tab選項卡切換效果