Skip to content

tab选项卡 第一阶段 #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chaihongjun wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

tab选项卡 第一阶段 #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f58894f
tab选项卡第一阶段
chaihongjun Aug 24, 2017
f8cd523
弹出层 第一阶段
chaihongjun Aug 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions package/dialog/code/chaihongjun/1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="cmn-hans">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name=applicable-device content="pc,mobile">
<!-- some meta tags, important for SEO"-->
<meta name="description" content="put a short description in here" />
<meta name="keywords" content="put your important keywords in here" />
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.modal {
display: none;
}
.modal-dialog {
width: 500px;
border: 5px solid #4f4f4f;
}
.modal-content {
height: 200px;
border-radius: 0;
}
.modal-backdrop{
z-index: -99999;
}

</style>
<script>
window.onload = function() {
var btn = document.getElementsByTagName('a')[0];
var modal = document.getElementById('modal-id');
var close=document.getElementsByTagName('button')[0];
var mask = document.getElementsByClassName('modal-backdrop')[0];
btn.onclick = function() {
modal.style.display = 'block';
modal.className = 'modal fade in';
mask.className = "modal-backdrop fade in";
};
close.onclick=function(){
modal.style.display = 'none';
modal.className = 'modal fade';
mask.className = "modal-backdrop fade";
};
};
</script>
<title>Dialog 弹出层</title>
</head>
<body>
<div class="container">
<a class="btn btn-primary" data-toggle="modal" href='#modal-id'>Trigger modal</a>
<div class="modal fade" id="modal-id">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">我真是标题啊</h4>
</div>
<div class="modal-body">
我是内容 我是内容
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade"></div>
</div>
</body>
</html>
77 changes: 77 additions & 0 deletions package/tab/code/chaihongjun/1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="cmn-hans">

<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name=applicable-device content="pc,mobile">
<!-- some meta tags, important for SEO"-->
<meta name="description" content="put a short description in here" />
<meta name="keywords" content="put your important keywords in here" />
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>选项卡-第一阶段</title>
<style type="text/css">
.container {
width: 400px;
text-align: left;
}

.tab-content {
padding: 5px;
}
</style>
<script>
window.onload = function() {
var tabs = document.getElementsByTagName('li');
var contents = document.getElementsByClassName('tab-pane');
for (var i = 0; i < tabs.length; i++) {

tabs[i].onclick = function() {
//单击任意tab的时候，先初始化全部不active
for (var i = 0; i < tabs.length; i++) {
Copy link
Contributor

@xuexb xuexb Aug 24, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

个人建议这里的 var i 跟外面的别一样, 可以:

  1. 用闭包处理
  2. 换个名...

tabs[i].index = i;
tabs[i].className = '';
contents[i].className = 'tab-pane';

}
//接着，active点击的tab和对应的content
tabs[this.index].className = 'active';
contents[this.index].className = 'tab-pane active';
};
}
};
</script>
</head>

<body>
<div class="container">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab" data-toggle="tab">home</a>
</li>
<li role="presentation">
<a href="#profile" aria-controls="tab" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="presentation">
<a href="#demo" aria-controls="tab" role="tab" data-toggle="tab">Demo</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">离离原上草，一岁一枯荣。 野火烧不尽，春风吹又生。 远芳侵古道，晴翠接荒城。 又送王孙去，萋萋满别情。
</div>
<div role="tabpanel" class="tab-pane" id="profile">
野火烧不尽，春风吹又生。 离离原上草，一岁一枯荣。 远芳侵古道，晴翠接荒城。 又送王孙去，萋萋满别情。
</div>
<div role="tabpanel" class="tab-pane" id="profile">
远芳侵古道，晴翠接荒城。 离离原上草，一岁一枯荣。 野火烧不尽，春风吹又生。 又送王孙去，萋萋满别情。
</div>
</div>
</div>
</div>
</body>

</html>