Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fd25bf1

Browse files
完善标签页,并新增带特效标签页
1 parent d8843a1 commit fd25bf1

File tree

9 files changed

+236
-67
lines changed

9 files changed

+236
-67
lines changed

‎README.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616

1717
5. 手风琴
1818

19-
![手风琴](demoImages/手风琴.png)
19+
![手风琴](demoImages/手风琴.gif)
2020

21-
6. 轮播图
21+
6. 标签页
22+
23+
![标签页](demoImages/标签页.gif)

‎demoImages/手风琴.gif‎

1.33 MB
Loading[フレーム]

‎demoImages/手风琴.png‎

-97.9 KB
Binary file not shown.

‎demoImages/标签页.gif‎

840 KB
Loading[フレーム]

‎全屏滚动/css/fullpage.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
6+
html,
7+
body {
8+
height: 100%;
9+
overflow: hidden;
10+
}
11+
12+
#container,
13+
.sections,
14+
.section {
15+
height: 100%;
16+
}
17+
#section0,
18+
#section1,
19+
#section2,
20+
#section3 {
21+
/* background-color: #000; */
22+
background-size: cover;
23+
background-position: 50% 50%;
24+
}

‎全屏滚动/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>全屏滚动</title>
8+
<link rel="stylesheet" href="css/fullpage.css">
9+
</head>
10+
<body>
11+
<div id="container">
12+
<div class="sections">
13+
<div class="section" id="section1">1</div>
14+
<div class="section" id="section2">2</div>
15+
<div class="section" id="section3">3</div>
16+
<div class="section" id="section4">4</div>
17+
</div>
18+
</div>
19+
</body>
20+
</html>

‎选项卡/css/style.css‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
body {
22
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
3+
padding-left: 100px;
34
}
45

56
button {
@@ -15,7 +16,7 @@ button {
1516
}
1617

1718
.tab {
18-
height: 100px;
19+
height: 30px;
1920
padding: 5px;
2021
}
2122

@@ -42,7 +43,7 @@ button {
4243
}
4344

4445
.dynamicTab {
45-
height: 100px;
46+
height: 30px;
4647
padding: 5px;
4748
}
4849

@@ -57,3 +58,50 @@ button {
5758
.close:hover {
5859
color: #848992;
5960
}
61+
62+
63+
.beauty-div {
64+
width: 300px;
65+
align-items: center;
66+
margin-bottom: 20px;
67+
overflow: hidden;
68+
border-bottom: 1px solid #d9d9d9;
69+
}
70+
71+
.beautyBut {
72+
float: left;
73+
border-radius: 3px;
74+
line-height: 30px;
75+
padding-top: 15px;
76+
padding-left: 15px;
77+
padding-right: 15px;
78+
margin-left: 10px;
79+
cursor: pointer;
80+
font-size: 14px;
81+
}
82+
83+
.beauty-line {
84+
background: #409EFF;
85+
bottom: 0;
86+
width: 80px;
87+
margin-left:10px;
88+
clear: both;
89+
height: 2px;
90+
-webkit-transition: margin-left .25s;
91+
transition: margin-left .25s;
92+
will-change: margin-left;
93+
}
94+
95+
.beautyTab {
96+
height: 30px;
97+
padding: 5px;
98+
}
99+
100+
.beautyTabs {
101+
height: 100px;
102+
padding-top: 10px;
103+
}
104+
105+
.beautyTabs .beautyTab:not(:first-child) {
106+
display: none;
107+
}

‎选项卡/index.html‎

Lines changed: 64 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,78 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>选项卡</title>
67
<link rel="stylesheet" href="css/reset.css">
78
<link rel="stylesheet" href="css/style.css">
89
</head>
9-
<body>
10-
<h1>普通的标签页</h1>
11-
<div>
1210

13-
<button>选项卡1</button>
14-
<button>选项卡2</button>
15-
<button>选项卡3</button>
16-
</div>
17-
<div class="tabs">
18-
<div class="tab">
19-
选项卡1
20-
</div>
21-
<div class="tab">
22-
选项卡2
23-
</div>
24-
<div class="tab">
25-
选项卡3
26-
</div>
27-
</div>
28-
<h1>可动态增减的标签页</h1>
29-
<div>
30-
<div class="dynamicBut">
31-
<span class="dynamicBtn">选项卡1 </span> <span class="close">&#9747</span>
32-
</div>
33-
<div class="dynamicBut">
34-
<span class="dynamicBtn">选项卡2 </span> <span class="close">&#9747</span>
35-
</div>
36-
<div class="dynamicBut">
37-
<span class="dynamicBtn">选项卡3</span> <span class="close">&#9747</span>
11+
<body>
12+
<div>
13+
<h1>普通的标签页</h1>
14+
<div>
15+
<button>选项卡1</button>
16+
<button>选项卡2</button>
17+
<button>选项卡3</button>
18+
</div>
19+
<div class="tabs">
20+
<div class="tab">
21+
选项卡1的内容
22+
</div>
23+
<div class="tab">
24+
选项卡2的内容
25+
</div>
26+
<div class="tab">
27+
选项卡3的内容
28+
</div>
29+
</div>
3830
</div>
3931

40-
</div>
32+
<div>
33+
<h1>可关闭的标签页</h1>
34+
<div>
35+
<div class="dynamicBut">
36+
<span class="dynamicBtn">选项卡1 </span> <span class="close">&#9747</span>
37+
</div>
38+
<div class="dynamicBut">
39+
<span class="dynamicBtn">选项卡2 </span> <span class="close">&#9747</span>
40+
</div>
41+
<div class="dynamicBut">
42+
<span class="dynamicBtn">选项卡3</span> <span class="close">&#9747</span>
43+
</div>
44+
45+
</div>
46+
47+
<div class="dynamicTabs">
48+
<div class="dynamicTab">选项卡1的内容</div>
49+
<div class="dynamicTab">选项卡2的内容</div>
50+
<div class="dynamicTab">选项卡3的内容</div>
51+
</div>
52+
</div>
4153

42-
<div class="dynamicTabs">
43-
<div class="dynamicTab">选项卡1</div>
44-
<div class="dynamicTab">选项卡2</div>
45-
<div class="dynamicTab">选项卡3</div>
46-
</div>
47-
<script src="js/tab.js"></script>
54+
<div>
55+
<h1>带切换特效的标签页</h1>
56+
<div class="beauty-div">
57+
<div class="beautyBut">
58+
选项卡1
59+
</div>
60+
<div class="beautyBut">
61+
选项卡2
62+
</div>
63+
<div class="beautyBut">
64+
选项卡3
65+
</div>
66+
<div class="beauty-line"></div>
67+
</div>
68+
69+
<div class="beautyTabs">
70+
<div class="beautyTab">选项卡1的内容</div>
71+
<div class="beautyTab">选项卡2的内容</div>
72+
<div class="beautyTab">选项卡3的内容</div>
73+
</div>
74+
</div>
75+
<script src="js/tab.js"></script>
4876
</body>
77+
4978
</html>

‎选项卡/js/tab.js‎

Lines changed: 74 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,84 @@
1-
let bts=document.getElementsByTagName('button');
2-
let tabs=document.getElementsByClassName('tab');
3-
let dyTabs=document.getElementsByClassName('dynamicTab');
4-
// let dybtns=document.getElementsByClassName('dynamicBtn');
5-
let dyBtns=document.getElementsByClassName('dynamicBtn');
6-
let closeTabs=document.getElementsByClassName('close');
7-
// console.log(dybtns);
1+
//获取普通标签页的按钮
2+
let bts = document.getElementsByTagName('button');
3+
4+
//获取普通标签页的内容
5+
let tabs = document.getElementsByClassName('tab');
6+
7+
//获取可动态增减的标签页的内容
8+
let dyTabs = document.getElementsByClassName('dynamicTab');
9+
10+
//获取可动态增减的标签页的按钮
11+
let dyBtns = document.getElementsByClassName('dynamicBtn');
12+
13+
//获取可动态增减的标签页的整块
14+
let dyButs = document.getElementsByClassName('dynamicBut');
15+
console.log(dyButs);
16+
17+
//获取可动态增减的标签页的关闭键
18+
let closeTabs = document.getElementsByClassName('close');
19+
20+
// console.log(dyBtns);
821
// console.log(closeTabs);
9-
// for(let i =0;i<bts.length;i++){
10-
// bts[i].onclick=function () {
11-
// for(let tab of tabs){
12-
// console.log(tab);
13-
// tab.style.display='none';
14-
// }
15-
// tabs[i].style.display='block';
16-
// };
17-
// }
18-
for(let i= 0 ;i<dyBtns.length;i++){
19-
dyBtns[i].onclick=function () {
20-
for(let dyTab of dyTabs){
22+
23+
for (let i = 0; i < bts.length; i++) {
24+
bts[i].onclick = function () {
25+
for (let tab of tabs) {
26+
console.log(tab);
27+
tab.style.display = 'none';
28+
}
29+
tabs[i].style.display = 'block';
30+
};
31+
}
32+
for (let i = 0; i < dyBtns.length; i++) {
33+
dyBtns[i].onclick = function () {
34+
for (let dyTab of dyTabs) {
2135
console.log(dyTab);
22-
dyTab.style.display='none';
36+
dyTab.style.display='none';
2337
}
24-
dyTabs[i].style.display='block';
25-
console.log('open');
38+
dyTabs[i].style.display='block';
39+
console.log('open btn 序号',i);
2640
}
2741
}
28-
for(let i= 1 ;i<closeTabs.length;i++){
29-
closeTabs[i].onclick=function () {
30-
dyTabs[i].style.display='none';
31-
dyBtns[i].style.display='none';
32-
dyTabs[0].style.display='block';
33-
console.log('close');
42+
var len = closeTabs.length;
43+
for (let i = 0; i < closeTabs.length; i++) {
44+
closeTabs[i].onclick = function () {
45+
if(--len<1){
46+
alert('标签页必须保留一个');
47+
}
48+
else{
49+
dyTabs[i].style.display = 'none';
50+
dyButs[i].style.display = 'none';
51+
console.log('close');
52+
}
3453
window.event?window.event.cancelBubble=true:event.stopPropagation();//阻止事件冒泡
3554
}
3655

3756
}
3857

58+
//获取普通标签页的按钮
59+
let beautyButs = document.getElementsByClassName('beautyBut');
60+
// console.log(beautyButs)
61+
//获取普通标签页的内容
62+
let beautyTabs = document.getElementsByClassName('beautyTab');
63+
let beautyLines = document.getElementsByClassName('beauty-line');
64+
console.log(beautyLines);
65+
var beautylen = beautyTabs.length;
66+
for (let i = 0; i < beautyTabs.length; i++) {
67+
beautyButs[i].onclick = function () {
68+
for (let beautyTab of beautyTabs) {
69+
70+
beautyTab.style.display = 'none';
71+
}
72+
console.log(i);
73+
console.log('width', beautyButs[i].offsetWidth)
74+
if(0!=i){
75+
beautyLines[0].style.marginLeft = (i+1)*10+(i) * beautyButs[i].offsetWidth+"px";
76+
beautyLines[0].style.width = beautyButs[i].offsetWidth+"px";
77+
console.log(beautyLines[0].style.marginLeft);
78+
}else{
79+
beautyLines[0].style.marginLeft = "10px";
80+
}
81+
82+
beautyTabs[i].style.display = 'block';
83+
};
84+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /