html前端上机⾯试题需求：：
1.完成所有的布局样式和排版
2.使⽤js完成所有的功能包括以下
3.完成标签的增加和删除
4.完成标签和内容的对应显⽰
5.完成标签和内容的修改
相关布局样式：
html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5<meta charset="UTF-8">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<title>js⾯向对象动态添加标签页</title>
8<link rel="stylesheet" href="./index.css">
9<link rel="stylesheet" href="./css/iconfont.css">
10</head>
11
12<body>
13<main>
14<h4>js⾯向对象动态添加标签页</h4>
15<h6>css所⽤时间：30分钟到40分钟 -------js完成时间是根据看视频</h6>
16<div class="tabsbox" id="tab">
17<!--tab标签 -->
18<nav class="fisrstnav">
19<ul>
20<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi "></span></li>
21<li><span>测试2</span><span class="iconfont icon-guanbi "></span></li>
22<li><span>测试3</span><span class="iconfont icon-guanbi "></span></li>
23</ul>
24<div class="tabadd">
25<span>+</span>
26</div>
27</nav>
28<!-- tab内容 -->
29<div class="tabscon">
30<section class="conactive">测试1</section>
31<section>测试2</section>
32<section>测试3</section>
33</div>
34</div>
35
36
37</main>
38<!--页⾯最下⾯使⽤js -->
39<script src="./js/tab.js"></script>
40</body>
41
42</html>
View Code
完成需要的css和js
答案：
css:
1body,
6/*清除padding*/
7 margin: 0;
8 }
9
10main {
11 position: relative;
12 }
13
14/*标题样式*/
15h4 {
16 margin: 50px 10px auto;
17 font-size: 24px;
18 text-align: center;
19
20 }
21
22h6 {
23 font-size: 15px;
24 text-align: center;
25 }
26
27/*设置外边框*/
28.tabsbox {
29 margin: 0 auto;
30 width: 70%;
31 height: 410px;
32 border: 1px solid #FFE0D5;
33 }
34
35/*设置头部区域*/
36.fisrstnav {
37 border-bottom: 1px solid #E9E0EB;
38 height: 50px;
39 }
40
41ul {
42 float: left;
43 }
44
45li {
46 position: relative;
47 text-align: center;
48 line-height: 50px;
49 width: 110px;
50 height: 50px;
51 float: left;
52 border-right: 1px solid #E9E0EB;
53 list-style-type: none;
54 }
55
56/*设置加号按钮区域*/
57.tabadd {
58 float: right;
59 line-height: 22px;
60 text-align: center;
61 margin-top: 10px;
62 margin-right: 10px;
63 width: 22px;
64 height: 22px;
65 border: 1px solid #E9E0EB;
66 }
67
68/*设置内容区域*/
69.tabscon {
70 margin: 33px;
71 }
72
73/*先设置隐藏*/
74section {
75 display: none;
76 }
77
78/*在设置显⽰*/
80 display: block;
81 }
82
83
84/**
85组件激活样式
86*/
87.liactive {
88 border-bottom: 1px solid white;
89 }
90
91/*设置外部引⼊*/
92.iconfont {
93 position: absolute;
94 top: 0;
95 right: 0;
96 width: 20px;
97 height: 20px;
98 line-height: 20px;
99 background: black;
100 color: white;
101 font-size: 1px !important;
102 border-radius: 0 0 0 30px;
103 }
View Code
js:
1var that;
2
3 class Tab {
4 constructor(id) {
5// 获取元素
6 that = this;
7this.main = document.querySelector(id)
8// 获取加号
9this.add = this.main.querySelector(".tabadd");
10// 获取li的⽗元素
11this.ul = this.main.querySelector(".fisrstnav ul:first-child") 12// 获取内容的⽗元素
13this.asection = this.main.querySelector('.tabscon')
14this.init()
19this.lis = this.main.querySelectorAll('li')
20// 获取内容标签
21this.sections = this.main.querySelectorAll('section')
22// 获取删除按钮
24this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')
25 }
26 init() {
27this.updateNode()
28// 帮定添加事件
lick = this.addTab;
30// init 初始化操作让相关的元素绑定
31for (var i = 0; i < this.lis.length; i++) {
32this.lis[i].index = i;
33// 给每⼀个li添加⼀个事件
34this.lis[i].onclick = leTab;
35// 添加删除按钮事件
37// 添加spsn事件
38this.spans[i].ondblclick = this.editTab;
39// 内容标签
40this.sections[i].ondblclick = this.ediSect;
41
42 }
43 }
44// 1。切换gongn
45 toggleTab() {
46// 先清除样式
47 that.clearClass()
48// 然后添加样式
49this.className = 'liactive';
50 that.sections[this.index].className = "conactive"
51 }
52// 添加功能
53 addTab() {
54// 先清除样式
55 that.clearClass()
56// ⽣成随机数
57var random = Math.random()
58// 创建li元素和section元素
59var li = ' <li class="liactive"><span>新增</span><span class="iconfont icon-guanbi "></span></li>'; 60var section = ' <section class="conactive">测试' + random + '</section>'
61// 追加到对应的位置
62 that.ul.insertAdjacentHTML('beforeend', li)
63 that.asection.insertAdjacentHTML('beforeend', section)
64 that.init()
65
66 }
67// 删除功能
68 removeTab(e) {
69 e.stopPropagation(); //防⽌冒泡
70var index = this.parentNode.index
71// 根据索引删除对应的li 和asection remove()⽅法可以直接删除对应的元素
72 that.lis[index].remove()
73 that.sections[index].remove()
74 that.init()
75// 删除后直接进⼊前⼀个
76 index--;
77// 直接不⽤⼿动点击实现点击事件
78 that.lis[index] && that.lis[index].click();
79 that.sections[index] && that.sections[index].click();
80 }
81// 修改标签
82 editTab() {
83// 先获取框中的⽂字
84var str = this.innerHTML;
85// 双击禁⽌选中⽂字
86 Selection ? Selection().removeAllRanges() : pty();
87// 添加⼀个⽂本框
88this.innerHTML = ' <input type="text" >'
89var input = this.children[0];
90 input.value = str
91 input.select();
92// 离开⽂本框在复制回去
93 blur = function () {
94this.parentNode.innerHTML = this.value
95 }
96
97
98 }
99// 清除样式
100 clearClass() {
101for (var i = 0; i < this.lis.length; i++) {
102this.lis[i].className = ''
103this.sections[i].className = ''
104 }
105 }
106// 修改内容
107 ediSect() {
108// 先获取框中的⽂字
109var str = this.innerHTML;
110// 双击禁⽌选中⽂字
111 Selection ? Selection().removeAllRanges() : pty();
应届生web前端面试题112// 添加⼀个⽂本框
113this.innerHTML = ' <input type="text" >'
114var input = this.children[0];
115 input.value = str
116 input.select();
117// 离开⽂本框在复制回去
118 blur = function () {
119this.parentNode.innerHTML = this.value
120 }
121 }
122 }
123new Tab('#tab')
View Code
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论