<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建选项卡和折叠菜单</title>
<!--引入jQuery文件-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--引入CSS文件-->
<style>
* { padding: 0; margin: 0; }
li, p { list-style: none; margin: 0; padding: 0; font-family: "Arial", "Microsoft YaHei", sans-serif; list-style: none; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 16px; font-weight: bold; font-family: "Arial", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
a { text-align: center; text-decoration: none; font-size: 14px; color: #504f4f; -webkit-font-smoothing: antialiased; }
body { font-family: "Arial", "Microsoft YaHei", sans-serif; color: #504f4f; background: rgba(42, 154, 242, 0.7); -webkit-font-smoothing: antialiased; }
.main{
box-shadow: 0 0 7px rgba(0,0,0,0.2);
border-radius: 15px 15px 3px 3px;
overflow: hidden;
position: relative;
width: 1150px;
height:auto;
background: #fff;
margin: 20px auto;
}
.main .com-tab{width: 100%;background: rgba(66,133,244,0.95); height: 50px;}
.main .tab{ margin: 0 auto; width: 90%; height:50px; overflow: hidden; line-height: 50px; }
.main .tab li{border-right: none; cursor: pointer; width: auto; padding: 0 105px; height: 100%; float: left; position: relative;}
.main .tab-content {
width: 100%;
position:relative;
display: none;
}
.sample{margin-top:10px;padding:20px 30px 0 30px;width: 1000px; float: left;}
.sample dt{background:url(https://img.php.cn//upload/image/898/332/382/1513845169986809.png) 0 4px no-repeat;padding:3px 0 15px 30px;position:relative; font-size: 18px;}
.sample dt:hover{cursor:pointer;}
.sample .hover{color: red;}
.sample dd{
</style>
<!--引入JS-->
<script>
$(function () {
// 获取页面中的选项元素
var tabl = $(".tab li")
// 给所有tab下所有span标签添加字体颜色
$('.tab li span').css('color','#fff')
// 用eq选择tab的第一个并且添加CSS样式
tabl.eq(0).css('background','#fff').find('span').css('color','#000')//然后用find方法为第一个li标签下的span添加CSS样式
//用eq、show()选择给第一个内容容器添加可见，
$('.tab-content').eq(0).show()
//用onclick创建点击事件
tabl.on('click',function () {
// 切换样式和打开相应内容
$(this).css({'background':'#fff'})//增加被点击的li元素的背景色为白色
.siblings('li')//查找兄弟节点
.css({'background':''})//设置兄弟节点的背景色，这里我设置为空
// 切换样式并将上一级的同类标签切换样式
$(this).find("span").css({'color':'#000'})//选取所有span设置字体颜色为黑色
.end()
.siblings()
.find('span').css({'color':'#fff'})
$(".tab-content").eq($(this).index())
.show()
.siblings()
.hide()
$('.com-tab').show()
})
$('.sample dd').hide()//隐藏dd里的内容
var but = $('.sample dt').hover(function(){$(this).addClass('hover')},//鼠标经过添加hover样式
function(){$(this).removeClass('hover')}//鼠标移开移除hover样式
)
// 给dt添加点击事件
but.click(function(){
$(this).next('dd')//查找所有的dd标签
.show()//把隐藏的dd显示出来
.siblings('dd')//查找dd的兄弟节点
.hide()//然后隐藏兄弟节点
})
})
</script>
</head>
<body>
<div class="main">
<div class="com-tab">
<div class="tab">
<li>
<span>HTML</span>
</li>
<li>
<span>CSS</span>
</li>
<li>
<span>jQuery</span>
</li>
<li>
<span>javascript</span>
</li>
</div>
</div>
<!-- 选项卡对应内容 -->
<div class="tab-content">
<div class="sample">
<dt>dreamweaver怎么快速对齐代码?</dt>
<dd>dreamweaver代码很多，想让代码对齐，方便查看，也减少出错率，该怎么对齐代码呢？下面我们就来看看详细的额教程。</dd>
<dt>谷歌浏览器不支持CSS设置小于12px的文字怎么办？</dt>
<dd>网页常常为了排版美观，会使用忽大或小的文字，通常font-size文字为12px（像素）文字。设置大于12px文字字体，各浏览器都能显示出CSS所设置文字大小效果。但是CSS设置小于12px文字时候谷歌浏览器google Chrome就不能显示出CSS所设置小于12px的文字字体效果。</dd>
<dt>dreamweaver怎么快速对齐代码?</dt>
<dd>dreamweaver代码很多，想让代码对齐，方便查看，也减少出错率，该怎么对齐代码呢？下面我们就来看看详细的额教程。</dd>
<dt>dreamweaver怎么快速对齐代码?</dt>
<dd>dreamweaver代码很多，想让代码对齐，方便查看，也减少出错率，该怎么对齐代码呢？下面我们就来看看详细的额教程。</dd>
<dt>dreamweaver怎么快速对齐代码?</dt>
<dd>dreamweaver代码很多，想让代码对齐，方便查看，也减少出错率，该怎么对齐代码呢？下面我们就来看看详细的额教程。</dd>
<dt>dreamweaver怎么快速对齐代码?</dt>
<dd>dreamweaver代码很多，想让代码对齐，方便查看，也减少出错率，该怎么对齐代码呢？下面我们就来看看详细的额教程。</dd>
<dt>dreamweaver怎么快速对齐代码?</dt>
<dd>dreamweaver代码很多，想让代码对齐，方便查看，也减少出错率，该怎么对齐代码呢？下面我们就来看看详细的额教程。</dd>
<dt>dreamweaver怎么快速对齐代码?</dt>
<dd>dreamweaver代码很多，想让代码对齐，方便查看，也减少出错率，该怎么对齐代码呢？下面我们就来看看详细的额教程。</dd>
<dt>dreamweaver怎么快速对齐代码?</dt>
<dd>dreamweaver代码很多，想让代码对齐，方便查看，也减少出错率，该怎么对齐代码呢？下面我们就来看看详细的额教程。</dd>
<dt>dreamweaver怎么快速对齐代码?</dt>
<dd>dreamweaver代码很多，想让代码对齐，方便查看，也减少出错率，该怎么对齐代码呢？下面我们就来看看详细的额教程。</dd>
<dt>dreamweaver怎么快速对齐代码?</dt>
<dd>dreamweaver代码很多，想让代码对齐，方便查看，也减少出错率，该怎么对齐代码呢？下面我们就来看看详细的额教程。</dd>
</div>
</div>
<div class="tab-content">
<div class="sample">
<dt>dreamweaver怎么快速对齐代码?</dt>
<dd>dreamweaver代码很多，想让代码对齐，方便查看，也减少出错率，该怎么对齐代码呢？下面我们就来看看详细的额教程。</dd>
<dt>谷歌浏览器不支持CSS设置小于12px的文字怎么办？</dt>
<dd>网页常常为了排版美观，会使用忽大或小的文字，通常font-size文字为12px（像素）文字。设置大于12px文字字体，各浏览器都能显示出CSS所设置文字大小效果。但是CSS设置小于12px文字时候谷歌浏览器google Chrome就不能显示出CSS所设置小于12px的文字字体效果。</dd>
</div>
</div>
<div class="tab-content">
<div class="sample">
<dt>如何利用node实现一个批量重命名文件的函数？</dt>
<dd>本文主要给大家介绍了关于利用node实现一个批量重命名文件的函数的相关资料，文中通过示例示例代码介绍的非常详细，对大家学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。</dd>
</div>
</div>
<div class="tab-content">
<div class="sample">
<dt>自定义微信登录扫码样式解决办法？</dt>
<dd>PC微信扫码登录 近期做一个PC端微信扫码登录的需求，微信扫码有两种方式，一种是新开一个二维码页面，另一种是内嵌入产品网页。本次以内嵌二维码为例，具体怎样在页面中显示一个登陆二维码，文档说的很清楚，</dd>
</div>
</div>
</div>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
