效果

    

实现的思路如下：

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. 关于Python字符编码encode和decode

    (注:本文部分内容摘自互联网,由于作者水平有限,不足之处,还望留言指正.) 记得几天前,部门的一个小姑娘问我,怎么她Python打印出来的中文信息都乱码了?我走过去,略思一二,瞬间给她搞定,其实这是字 ...

  2. Linux工作管理 jobs、fg、bg、nohup命令

    概述 在Linux 中我们登陆了一个终端,已经在执行一个操作,可以通过一定的操作或命令在不关闭当前操作的情况下执行其他操作. 例如,我在当前终端正在 vi 一个文件,在不停止 vi 的情况下,如果我想 ...

  3. [转]毕设- 深入HBase架构解析（一）

    深入HBase架构解析(一)   前记 公司内部使用的是MapR版本的Hadoop生态系统,因而从MapR的官网看到了这篇文文章:An In-Depth Look at the HBase Archi ...

  4. 插入算法分别从C，java,python三种语言进行书写

    真正学懂计算机的人(不只是“编程匠”)都对数学有相当的造诣,既能用科学家的严谨思维来求证,也能用工程师的务实手段来解决问题——而这种思维和手段的最佳演绎就是“算法”. 作为一个初级编程人员或者说是一个 ...

  5. 如何评价一个pipeline的好坏

    生物信息NGS相关软件众多. 常用的比对软件:bwa,bowtie: 去pcr重复的软件\:samtools,picard: calling variant:samtools/bcftools,gat ...

  6. 20145201 《Java程序设计》第一周学习总结

    # 20145201 <Java程序设计>第一周学习总结 ## 教材学习内容总结 万事开头难,终于开始学习了Java.寒假的时候看到老师的要求确实有点慌,但是这周翻开书,从书本知识第一行学 ...

  7. Ubuntu系统Anaconda下载安装与切换源教程【转】

    本文转载自:https://blog.csdn.net/qq_36268036/article/details/81517893 1. 下载安装: 这里选用国内清华大学的Tuna开源软件镜像站作为演示 ...

  8. vs2013 浏览器 browserlink 不停访问

  9. mysql实际使用思路

    在熟悉mysql语法的基础上,想在自己的应用程序中使用它,应该怎么操作呢? 自然的想法就是找到相应语言的mysql接口,然后熟悉接口,对其进行调用. 具体的做法与思路如下: 找到C的mysql接口 新 ...

  10. mysql desc esc 基本命令总结

    asc 按升序排列desc 按降序排列 下列语句部分是Mssql语句,不可以在access中使用. SQL分类:DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE)DML—数据操 ...