效果

    

实现的思路如下：

controller层同时把两个内容都查处理

前端html用js控制显示

（1）前端的tab代码

（2）tab内容的结构

（3）关键部分 js

$(".hd ul li").click(function(){
var index=$(this).index();
$(this).addClass("on").siblings().removeClass("on");
$(".about-details-pro .bd").eq(index).css("display","block").siblings(".bd").css("display","none")
})

js实现tab页面不同内容切换显示的更多相关文章

  1. angularjs中向html页面添加内容节点元素代码段的两种方法

    第一种方式:原生JS向html页面添加内容节点元素代码段: <!DOCTYPE html> <html> <head> <meta charset=" ...

  2. 如是使用JS实现页面内容随机显示

    之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家 ...

  3. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  4. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

  5. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  6. Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】

    Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...

  7. Axure 页面内多组内容切换的实现 + 利用一个内联框架实现百度地图访问

    Axure  页面内多组内容切换的实现,场景:点击某个元件的时候,会显示响应的页面 操作:将显示的页面设置为动态面板,如图所示应该设置动态面板的状态为三个状态,分别为点击qq账号.手机账号.邮箱账号时 ...

  8. jQuery实现页面导航内容定位效果，并支持内容切换

    需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...

  9. html tab页面切换事件。

    $(document).bind("visibilitychange",function(e){ //只对tab页面切换有效 //document.visibilityState ...

随机推荐

  1. javascript 中的比较大小，兼 typeof()用法

    javascript中的排序: 1.不同类型 比 类型 (字符串 > 数字)   2.同类型:(字符串  比 按字母顺序 )(数字 比 大小) 测试: <!DOCTYPE html> ...

  2. 20145201 《Java程序设计》第四周学习总结

    20145201 <Java程序设计>第四周学习总结 教材学习内容总结 本周学习了课本第六.七章内容,即继承与多态.接口与多态. 第六章 继承与多态 6.1 何谓继承 6.1.1 继承共同 ...

  3. 验证码插件代码：image.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. 周立功CAN-II引脚图

    注意:如果需要两个CAN通道通信,直接用杜邦线将L连L,H连H,地连地就行(3.6引脚已做短接处理),不需要反接

  5. shell脚本实现进度条

    使用shell脚本编写进度条 可已加入到shell脚本当中 主要作用:好看 美观 没毛用 (一) 普通进度条: #!/bin/bashb='' for ((i=0;$i<=20;i++)) do ...

  6. 饭卡管理系统学生E-R图

    - 2 - 1.1 可行性分析 1.1.1 项目背景 近年来学生食堂饭卡的使用给高校餐饮管理带来了一次革命, 从结算方式到账户管理, 从卫生便捷到数据统计等,不仅给就餐者带来了方便,也使餐饮结算手段发 ...

  7. ES6 实现阶乘

    // 实现一个5的阶乘function factorial(n, acc = 1) { console.log(`n=${n};acc=${acc}`) if(n <= 1) return ac ...

  8. Zookeeper初步了解

    Zookeeper初步了解: Zookeeper实现了许多复杂的事情,例如实现了Zookeeper Atomic Broadcasting Protocal来广播状态信息的变化,Fast Paxas ...

  9. mysql查询结果乱码

    1.查询数据库结果乱码 mysql,; +-----------+-------------------------------------------------------------+ | do ...

  10. 基于 CodeIgniter 的各类开源项目大全

    名称:STBlog 介绍:STBlog 是一套由CI中国社区驱动,基于Codeigniter MVC 框架编写的多权限博客系统,轻巧/快速/安全/易拓展/界面友好是它的最大特点. 官方:http:// ...