效果

    

实现的思路如下：

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. maven项目，去除jar包中的不想要的依赖关系

    解释:就是说项目中要用到某一个a.jar包,通过maven引入了之后,也自动的导入了该jar包所依赖的包,这里就会存在一个问题,如果a.jar包依赖b.jar这个项目的1.0版本,可是我的项目中已经有 ...

  2. Docker 使用指南 —— 基本操作

    Docker 是一个能够把开发应用程序自动部署到容器的开源引擎.它由Docker公司的团队编写,基于Apache 2.0开源协议授权.它提供了一个简单.轻量的建模方式,使开发生命周期更高效快速,鼓励了 ...

  3. Resharper 快捷键

    编辑   Ctrl + Space 代码完成 Ctrl + Shift + Space代码完成 Ctrl + Alt + Space代码完成 Ctrl + P 显示参数信息 Alt + Insert ...

  4. MPU6050工作原理及STM32控制MPU6050

    源:MPU6050工作原理及STM32控制MPU6050 MPU6050 介绍

  5. Sybase数据库：两个特别注意的地方

    Sybase数据库:两个特别注意的地方 一.字段别名 字段别名不能为查询条件中的列名,会导致查询出来的数据不准确:最好字段别名为非列名: 二.更新的表名的大小写 update a set .... s ...

  6. Win32 API编程：网络编程在设置WSAAsyncSelect模型后connect的返回值问题

    通过WSAAsyncSelect()可以设置非阻塞异步套接字 ::WSAAsyncSelect(s, hDlg, WM_SOCKET, FD_CONNECT | FD_CLOSE | FD_WRITE ...

  7. MapReduce:将下面的两排数字先按第一排排序，然后再按第二排排序，要求顺序排序

    MapReduce:将下面的两排数字先按第一排排序,然后再按第二排排序,要求顺序排序 文件如下: 这个案例主要考察我们对排序的理解,我们可以这样做: 代码如下(由于水平有限,不保证完全正确,如果发现错 ...

  8. 总结一下TODO的用法

      1.设置任务的标签 WINDOW->preference->java->complier->task tags加一个 DONE:NORMAL表示已经完成的任务2. java ...

  9. 平滑重启php

    kill -USR2 `cat /usr/local/webserver/php/var/run/php-fpm.pid`

  10. MySQL安装配置教程

    环境:Windows 7 旗舰版 64位MySQL版本:mysql-5.5.14-winx64MySQL下载地址:http://dev.mysql.com/downloads/installer/ 1 ...