效果

    

实现的思路如下：

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. E-R图和数据库的设计

    数据库设计: 原则:如果属性有了多个字段,可以当实体.如果只有一个字段,只能当属性(比如实体属性种类) 1.设计E-R图 实体:矩形 关系:菱形 属性:椭圆(可省) 2.关系的类型 一对一 一对多 多 ...

  2. WPF使用Expression Design设计图形

    1.将画好的图形通过菜单导出成WPF xaml格式. 2.导出的文件就可以直接在WPF程序中使用了. 这里导出的DrawingBrush, <?xml version="1.0&quo ...

  3. JSONP跨站访问

    js中几种实用的跨域方法原理详解 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协 ...

  4. 实验四Android开发

    实验四Java Android简易开发 实验准备 Android Studio 的下载: Android Studio 安装教程 在安装过程中的问题: 在下载了官网上的说明包含sdk的安装包之后找不到 ...

  5. cocoa中获得root权限的几种方法

    目前我所知道的,在cocoa中获得root权限的方法有3种: 1. 通过AuthorizationCopyRights函数 2. 在UI上添加一个锁的样子的控件,然后通过开关这个锁来获取root权限 ...

  6. Spring Cloud 微服务开放平台接口

    github源码地址:https://github.com/spring-cloud/spring-cloud-security 前言: 什么是开放平台接口 场景 : 总公司与子公司 对接接口  还有 ...

  7. 编写第一个Shell脚本【TLCL】

    怎样编写一个 Shell 脚本 编写一个脚本 使脚本文件可执行 把脚本放到Shell能够找到的地方 脚本文件格式 #!/bin/bash # This is our first script. ech ...

  8. JDBCTemplate执行增删改查（CDUR）操作

    1.JdbcTemplate简介 (1)Spring提供的一个操作数据库的技术JdbcTemplate,是对Jdbc的封装.语法风格非常接近DBUtil. JdbcTemplate可以直接操作数据库, ...

  9. spring注解方式注入bean

    用注解的方式注入bean,spring的配置文件也要增加一些约束和导入注解所在的包 applicationContext.xml <?xml version="1.0" en ...

  10. MyEclipse 为xml添加本地的dtd文件

    在使用Eclipse或MyEclipse编辑XML文件的时候经常会碰到编辑器不提示的现象,这常常是因为其xml文件需要参考的DTD文件找不到,还有因为网络的问题不能及时提示而产生的.Eclipse/M ...