js实现tab页面不同内容切换显示

效果

    

实现的思路如下:

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")
})

时间: 2024-08-28 16:27:10

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

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

之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家一起分享,如何使用js控制实现页面内容随机显示. 这里我以本地的蝉知建站系统为例,给大家演示一下实现流程. 首先将想要显示的不同内容分别放到不同的盒子里(div),并用ID属性标记好.例如: <div id="p1"> <p>联系人:张三</p> <

如何使用JS实现页面内容随机显示

之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家一起分享,如何使用js控制实现页面内容随机显示. 这里我以本地的蝉知建站系统为例,给大家演示一下实现流程. 首先将想要显示的不同内容分别放到不同的盒子里(div),并用ID属性标记好.例如: 1 <div id="p1"> 2 <p>联系人:张三</p>

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

LayUI tab选项卡 + 分页展示 实现 Tab选项卡切换显示对应数据 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1.选项卡[官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格[官网 – 文档/示例 – 内置模块 – 数据表格] 3.分页[官网 – 文档/示例 – 内置模块 – 分页] 具体实现过程: 1. 先找选项卡.使用默认的tab.然后查看代码.复制对应的代码. 2. 然后改成自己想要显示效果.如下: 3. 然后查看具体的代码如下: 4. 获取Tab选

CSS+JS实现tab标签切换

实现tab标签切换比较简单,下面先看看我实现的效果: 我主要实现了: 1.tab之间的相互切换: 2.显示选中的tab 下面看看实现代码: css: html,body,div{ font-size: 12px; font-family:"Arial"; } .tab-ui{ width: 400px; height: 300px; position: relative; } .tab-title{ border-top-right-radius:8px; float: left; b

[Jquery]tab页面切换效果

思路:取得头部和内容的div,头部当前点击的高亮,其余的去除高亮,并通过index()方法获得当前点击的索引,然后内容div通过.eq(index)显示和隐藏 优化:当前做法,从第一个快速移到最后一个,中间每个内容都会相继显示出来.比较好的用户体验是,从某个标签迅速移到另一个标签,中间不想看的内容不显示出来.这就需要延迟切换效果(每次划每次加载信息,必将影响性能) 使用定时器:setTimeout(500毫秒),每次鼠标滑过的时候,先判断定时器存不存在,存在的话先清除定时器,然后开启定时器,执行

【原创】android——Tabhost 自定义tab+底部实现+intent切换内容

1,实现tabhost自定义格式,再此仅仅显示背景和文字,效果图预览:(底边栏所示) (图片变形) 2,xml配置 activity_user的XML配置  1 <TabHost xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:id="@+id/tabhost&qu

jquery实现tab页切换显示div

1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

js如何保证iframe里的内容,显示在父窗口

很多情况下,在使用iframe的时候,经常出现父窗口的内容,显示在了iframe里面,采用js判断的方式,即可简单的解决这个问题: if (self != top) { top.location.href=window.location.href; } 这个方法衍生的应用,还可以帮助你防止自己的页面,被其他的网站采用iframe的方式,挂到外面的网站上,如果你想阻止的话,这也是一个方法.

js实现tab页切换选项卡代码特效

原文:js实现tab页切换选项卡代码特效 源代码下载地址:http://www.zuidaima.com/share/1550463557864448.htm JS 写的tab切换效果