jq制作选项卡

电脑

webstorm软件

一些材料，比如图片等

jq库文件

先在头部引用库文件，再引用自己写的js文件。

编写html

再编写cssul,li{list-style: none;padding:0px;margin:0px}*{padding:0px;margin:0px}a{text-decoration: none;color: black}a:hover{color: #188eee}.nav{width:750px;}.nav >ul li{float: left;width: 100px;height:50px;line-height: 50px;text-align: center;}.nav >ul li a{    width: 100px;height:50px; display: block }.act{border-bottom: solid 2px #188eee;color: #188eee}.nav-con{clear: both;display: none}.nav-con ul li{float: left;width: 220px;margin-left:20px;margin-top:10px;padding:5px}.nav-con ul li:hover{box-shadow:5px 5px 5px #999}.nav-con ul li h5{font-weight: normal;padding:10px 0;height: 30px}.nav-con ul li p{position: relative;bottom: 2px}.nav-con ul li p span{float: left;color: #188eee}.nav-con ul li p a{float: right;color: #666666;font-size: 14px}.nav-con ul li p a:hover{color: #188eee}

再编写jq代码$(function(){  //第一个内容显示    $('.nav-con').eq(0).show();    $('.nav-ul li').mouseover(function(){      var i;      //获取当前索引       i=$(this).index();     // 给当前li加样式“act”，其他移除       $('.nav-ul li').eq(i).addClass('act').siblings().removeClass('act');      //让索引为i的内容显示，其他隐藏        $('.nav-con').eq(i).show().siblings('.nav-con').hide();    });});

最后效果如下图