Tab选项卡切换效果_学习笔记

首页免费课 Tab选项卡切换效果笔记

Tab选项卡切换效果

                
                Amy
            
                    查看讲师更多课程 
                    Amy讲师的其他课程
                
CSS3实现漂亮ToolTips效果
初级·42722
免费课程
                                
css3实现网页平滑过渡效果
初级·54371
免费课程
                                
CSS3实现“图片阴影”效果
初级·34769
免费课程
                                
DOM事件探秘
中级·99544
免费课程
                                
瀑布流布局
初级·97759
免费课程
                                
                难度初级
            
                时长 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选项卡切换效果