前端开发简单选项卡的实现
摘要： 西安前端开发招聘 兰州前端开发招聘 旺小宝前端开发招聘 一. js源生代码实现选项卡： <!DOCTYPE html> <html lang=”en”> <head> <meta charset=̶……
| 西安前端开发招聘 |
| 兰州前端开发招聘 |
| 旺小宝前端开发招聘 |
一. js源生代码实现选项卡：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>js实现选项卡</title>
<style type=”text/css”>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
html{
font-family: ‘微软雅黑’;
}
#web{
width: 100%；
height:100%;
}
.choice{
width: 1200px;
height: auto;
margin: 0 auto;
}
ul{
width: 1200px;
height: 50px;
}
li{
width: 240px;
height: 50px;
background: #3D8765;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
float: left;
}
li.active{
background: #013B20;
}
.choice>section{
width: 1198px;
height: 400px;
text-align: center;
border: 1px solid #666;
display: none;
}
.choice>section.active{
display: block;
}
</style>
</head>
<body>
<section id=”web”>
<section class=”choice”>
<ul>
<li class=”active”>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<section class=”active”>内容1</section>
<section>内容2</section>
<section>内容3</section>
<section>内容4</section>
<section>内容5</section>
</section>
</section>
</body>
<script type=”text/javascript”>
var oWeb = document.getElementById(‘web’)
var oChoice = oWeb.getElementsByClassName(‘choice’)[0]
var oUl = oChoice.children[0] // 获取ul对象
var oLi = oUl.children // 获取li集合
// 点击事件
for (var i = 0; i < oLi.length; i++) {
oLi[i].index = i // 给每个选项添加索引，目的是与内容关联起来
oLi[i].onclick = function() {
for (var j = 0; j < oLi.length; j++) {
// 把所有的类名清空
oLi[j].className = ”
oChoice.children[j + 1].className = ” //
}
// 添加点击项以及关联的内容的类名 active
this.className = ‘active’
oChoice.children[this.index + 1].className = ‘active’
}
}
</script>
</html>
二. jquery实现选项卡：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>jquery实现选项卡</title>
<style type=”text/css”>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
html {
font-family: ‘微软雅黑’;
}
#web {
width: 100%； height:100%;
}
.choice {
width: 1200px;
height: auto;
margin: 0 auto;
}
ul {
width: 1200px;
height: 50px;
}
li {
width: 240px;
height: 50px;
background: #3D8765;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
float: left;
}
li.active {
background: #013B20;
}
.choice>section {
width: 1198px;
height: 400px;
text-align: center;
border: 1px solid #666;
display: none;
}
.choice>section.active {
display: block;
}
</style>
</head>
<body>
<section id=”web”>
<section class=”choice”>
<ul>
<li class=”active”>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<section class=”active”>内容1</section>
<section>内容2</section>
<section>内容3</section>
<section>内容4</section>
<section>内容5</section>
</section>
</section>
</body>
<script type=”text/javascript”>
$(function() {
// 选项卡
$(‘.choice ul’)
.find(‘li’)
.click(function() {
var index = $(this).index() // 创建索引，关联选项卡的内容
$(this)
.addClass(‘active’)
.siblings()
.removeClass(‘active’)
$(‘.choice section’)
.eq(index)
.addClass(‘active’)
.siblings()
.removeClass(‘active’)
})
})
</script>
</html>
| 大连前端开发招聘 |
| 思睿地产招聘前端开发 |
| 智联招聘web前端开发 |
» 本文来自：前端开发者 » 《前端开发简单选项卡的实现》
» 本文链接地址：https://www.rokub.com/7788.html
» 您也可以订阅本站：https://www.rokub.com
近期评论