十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
小编给大家分享一下基于Bootstrap和JQuery如何实现动态打开和关闭tab页,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联从2013年开始,先为福山等服务建站,福山等地企业,进行企业商务咨询服务。为福山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
1. 测试环境
JQuery-3.2.1.min.j
Bootstrap-3.3.7-dist
win7
1.2. 实践
HTML代码片段
JS代码片段
/** * 增加tab标签页 * @param options: * menuIDtab标签页对应的左侧导航菜单在数据库表中的id,作为tab元素id的组成部分 * tabName tab标签页名称 * tabUrl tab“装载”的url * tabContentID tab标签页的页面内容所在的父级元素(div容器) * * @returns {boolean} */ function addTab(options) { setBreadcrumb(options.level1, options.level2, options.tabName); //tabUrl:当前tab所指向的URL地址 varisExists= isTabExists(options.menuID); if(isExists){ // 如果tab标签页已打开,则选中、激活 $("#tab-a-" + options.menuID).click(); // 注意,必须是点击 a标签才起作用 } else { // 新增 tab 标签页 //按钮图标 '' $("#" + tabFatherElementID).append( '' + ' '+ options.tabName + '
Bootstrap是目前最受欢迎的前端框架,它是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,它还有一个响应最好的Grid系统,并且能够在手机端通用,而Bootstrap是使用许多可重用的CSS和JavaScript组件,可以帮助实现需要的几乎任何类型的网站的功能,此外,所有这些组件都是响应式的。
以上是“基于Bootstrap和JQuery如何实现动态打开和关闭tab页”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!