<!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>
