效果

    

实现的思路如下：

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. MapReduce:实现文档倒序排序，且字符串拼接+年+月+日

    写出MapReduce程序完成以下功能. input1: -- a -- b -- c -- d -- a -- b -- c -- c input2: -- b -- a -- b -- d -- ...

  2. 启动工程Ehcache报错

    缓存组建用的Ehcache,在启动的时候报了下面的错误,虽然不影响使用,看着还是有点碍眼:   DEBUG net.sf.ehcache.util.UpdateChecker - Update che ...

  3. Spring容器创建过程

    Spring容器的refresh()   创建刷新 1  prepareRefresh() 刷新前的预处理 1) initProPertySources() 初始化一些属性设置: 子类定义个性化的属性 ...

  4. install tabix/bgzip

    bgzip – Block compression/decompression utility tabix – Generic indexer for TAB-delimited genome pos ...

  5. IDEA 修改JSP和后端数据后，页面刷新可以实时更新

    情况:刚开始使用IDEA进行开发时,发现修改JSP页面或者后端数据后,再刷新浏览器页面,发现没有变化,页面无更新. 这样就导致不得不频繁重启tomcat服务器.非常麻烦 解决方法: 步骤1. 先设置t ...

  6. Hibernate -- 一对多的双向关联关系

    示例代码: Customer.java package cn.itcast.many2onedouble; import java.util.HashSet; import java.util.Set ...

  7. CodeChef CHEFSOC2 Chef and Big Soccer 水dp

    Chef and Big Soccer   Problem code: CHEFSOC2 Tweet     ALL SUBMISSIONS All submissions for this prob ...

  8. 关于VirtualBox在桥接模式下无法联网解决方案

    关于VirtualBox在桥接模式下无法联网 解决方案VirtualBox与笔记本无线网卡桥接 如果重新开机连接不上,可能需要重新共享一下,(重新给桥接网卡分配与当前物理机IP在同一局域网段的IP) ...

  9. 在数据库中添加数据以后，使用Mybatis进行查询结果为空

    在数据库中添加数据以后,使用Mybatis进行查询结果为空,这是因为数据库中添加数据忘记commit的缘故.

  10. bower 安装

    安装Yeomannpm install --global yo搭建一个web应用脚手架,你将需要安装generator-webapp生成器:npm install -g generator-webap ...