jquery实现faq问答帮助中心tab菜单导航代码
代码语言:html
所属分类:选项卡
代码描述:jquery实现faq问答帮助中心tab菜单导航代码
代码标签: jquery faq 问答 帮助中心 tab 菜单 导航 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> body{ margin: 0; padding:0; } .container{ font-family: 微软雅黑; background: #fff; padding: 30px; margin:50px auto; overflow: hidden; } .container .menu{ width: 240px; margin-left: 130px; float: left; border-right: 1px solid #aaa; } /*position 菜单背景图标*/ .positionIicon{ display: inline block; width: 32px; height: 32px; margin: 0px 4px; float: left; margin-right: 10px; } .container .menu h3{ font-size: 20px; cursor: pointer; } .container .menu ul{ display: none; } .container .menu ul li{ height: 28px; line-height: 28px; } .container .menu ul li a:hover{ background: #9FB6CD; border-radius: 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px; -moz-border-radius:14px; color:#fff; } ul{ list-style: none; } a{ text-decoration: none; color: #000; font-size: 14px; display: block; width: 180px; height: 26px; padding-left: 10px; } .container .menu .selected{ background: #ccc; border-radius: 14px; } .container .content{ margin-top: 15px; width: 860px; margin-left: 400px; } .container .content .get-menu{ margin-left: -10px; } .container .content .get-menu a{ display: inline-block; font-size: 15px; height: 40px; } .container .content .get-menu a:last-child{ margin-left: -8px; color: #7D9EC0; } .container .content .get-menu span{ display: inline-block; height: 40px; margin-left: -110px; } .container .content .menu1 .tab { display: none; } .container .content .menu1 .active{ display: block; } .container .content .menu1 .tab p{ font-size: 14px; line-height: 20px; color: rgba(0,0,0,1); word-break:break-all; } .container .content .menu1 .tab .tt{ font-size: 14px; font-weight: bold; } /*第二个菜单下的文档内容*/ .container .content .menu2 .tab { display: none; } .container .content .menu2 .active{ display: block; } .container .content .menu2 .tab p{ font-size: 14px; line-height: 20px; color: rgba(0,0,0,0.8); word-break:break-all; } .container .content .menu2 .tab .tt{ font-size: 14px; font-weight: bold; } /*第三个菜单下的文档内容*/ .container .content .menu3 .tab { display: none; } .container .content .menu3 .active{ display: block; } .container .content .menu3 .tab p{ font-size: 14px; line-height: 20px; color: rgba(0,0,0,0.8); word-break:break-all; } .container .content .menu3 .tab .tt{ font-size: 13px; font-weight: bold; } </style> </head> <body> <div class="container"> <div class="menu"> <h3><i class="fa fa-graduation-cap positionIicon"></i>快速上手</h3> <ul class="ulmenu1"> <li><a class="selected" href="#tab1">基础问题</a></li> <li><a href="#">仪表盘</a></li> <li><a href="#">事务处理</a></li> <li><a href="#">财务处理</a></li> <li><a href="#">报表</a></li> <li><a href="#">系统设置</a></li> </ul> <h3><i class="fa fa-futbol-o positionIicon"></i>产品手册</h3> <ul class="ulmenu2"> <li><a href="#" class="selected">基础问题</a></li> <li><a href="#">操作环境</a></li> <li><a href="#">科目问题</a></li> <li><a href="#">期初问题</a></li> <li><a href="#">期末结转类凭证问题</a></li> <li><a href="#">凭证问题</a></li> <li><a href="#">报表</a></li> <li><a href="#">数量金额计算</a></li> <li><a href="#">账套信息</a></li> <li><a href="#">小规模纳税人和一般纳税人</a></li> <li><a href="#">打印问题</a></li> <li><a href="#">固定资产问题</a></li> </ul> <h3><i class="fa fa-windows positionIicon"></i>常见问题</h3> <ul class="ulmenu3"> <li><a class="selected" href="#tab1">基础问题</a></li> <li><a href="#">操作环境</a></li> <li><a href="#">科目问题</a></li> <li><a href="#tab3">期初问题</a></li> <li><a href="#tab4">期末结转类凭证问题</a></li> <li><a href="#tab5">凭证问题</a></li> <li><a href="#">报表</a></li> <li><a href="#">数量金额计算</a></li> <li><a href="#">账套信息</a></li> <li><a href="#">小规模纳税人和一般纳税人</a></li> <li><a href="#">打印问题</a></li> <li><a href="#">固定资产问题</a></li> </ul> </div> <div class="content"> <div class="get-menu"> <a href="#">帮助中心</a> <span>></span> <a class="A1" href="#">常见问题</a> </div> <div class="menu1 menu_tab"> <div id="tab1" class="tab active"> <p class="tt">1.是如何收费?</p> <p>This is Answer!1.是如何收费??1.是如何收费??1.是如何收费??1.是如何收费??1.是如何收费??</p> <p class="tt">2.安全吗?</p> <p>This is Answer!2.安全吗?2.安全吗?2.安全吗?2.安全吗?2.安全吗?2.安全吗?2.安全吗?</p> <p class="tt">3.的数据能否保存?</p> <p>的数据能否保存?的数据能否保存?的数据能否保存?</p> <p>的数据能否保存?</p> </div> <div id="tab2" class="tab"> <p class="tt">4.快乐加账号余额与银行账号余额不一致?</p> <p>This is Answer!4.快乐加账号余额与银行账号余额不一致?4.快乐加账号余额与银行账号余额不一致?4.快乐加账号余额与银行账号余额不一致?</p> <p class="tt">5.手工凭证的银行收付转能为什么不能反应到仪表盘?</p> <p>This is Answer!5.手工凭证的银行收付转能为什么不能反应到仪表盘?5.手工凭证的银行收付转能为什么不能反应到仪表盘?5.手工凭证的银行收付转能为什么不能反应到仪表盘?5.手工凭证的银行收付转能为什么不能反应到仪表盘?</p> </div> <div id="tab3" class="tab"> <p class="tt">6.新增银行账号处”是否现金账户”什么意思?</p> <p>This is Answer!6.新增银行账号处”是否现金账户”什么意思?6.新增银行账号处”是否现金账户”什么意思?</p> <p class="tt">7.事务处理处生成的凭证属于哪个会计期间的??</p> <p>This is Answer!7.事务处理处生成的凭证属于哪个会计期间的??7.事务处理处生成的凭证属于哪个会计期间的??7.事务处理处生成的凭证属于哪个会计期间的??7.事务处理处生成的凭证属于哪个会计期间的??7.事务处理处生成的凭证属于哪个会计期间的??</p> <p class="tt">8.凭单与费用报销单有什么区别?</p> <p>This is Answer!8.凭单与费用报销单有什么区别?8.凭单与费用报销单有什么区别?8.凭单与费用报销单有什么区别?8.凭单与费用报销单有什么区别?</p> <p class="tt">9.财务复核的时候若发现上交的发票与报销不符,在系统该怎么操作?</p> <p>This is Answer!9.财务复核的时候若发现上交的发票与报销不符,在系统该怎么操作?9.财务复核的时候若发现上交的发票与报销不符,在系统该怎么操作?9.财务复核的时候若发现上交的发票与报销不符,在系统该怎么操作?</p> <p class="tt">10.费用报销个步骤中,哪个步骤会自动生成会计凭证?</p> <p>This is Answer!10.费用报销个步骤中,哪个步骤会自动生成会计凭证?10.费用报销个步骤中,哪个步骤会自动生成会计凭证?10.费用报销个步骤中,哪个步骤会自动生成会计凭证?</p> <p class="tt">11.已提交的报销单如发现填写错误能撤回吗?</p> <p>This is Answer!11.已提交的报销单如发现填写错误能撤回吗?11.已提交的报销单如发现填写错误能撤回吗?11.已提交的报销单如发现填写错误能撤回吗?11.已提交的报销单如发现填写错误能撤回吗?</p> <p class="tt">12.工资处理处社保公积金都能自动计算的吗?</p> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0