JQuery如何实现选项卡?
废话不多说直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript之JQuery实现Tab切换</title>
<style>
* {
margin: 0;
padding: 0;
}
main {
width: 450px;
margin: 100px auto;
}
ul {
display: flex;
}
ul li {
list-style: none;
width: 150px;
height: 50px;
background-color: gray;
text-align: center;
line-height: 50px;
color: white;
font-size: 18px;
}
div {
width: 450px;
height: 300px;
background-color: black;
color: white;
font-size: 18px;
}
#div2 {
display: none;
}
#div3 {
display: none;
}
.active {
background-color: yellowgreen
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<main>
<ul>
<li class="active">HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<div id='div1'>HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W.
Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX,
Windows等)。使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即现在所见到的网页。</div>
<div id='div2'>层叠样式表(英文全称:Cascading Style
Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
</div>
<div id='div3'>JavaScript(简称“JS”)
是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript
基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。</div>
</main>
<script>
$(document).ready(function () {
$('li').on('click', function () {
$(this).addClass('active').siblings().removeClass('active');
$('div').hide().eq($(this).index()).show();
});
});
</script>
</body>
</html>