$(function() {
//选择标题显示

初始显示内容及样式
$('.right-content .right-item').eq(0).addClass('showcontent')
$('.left-content > li').eq(0).addClass('active')

点击时触发页面内容显示和active切换
$('.left-content > li').click(function(){
  var index = $('.left-content > li').index(this)
  $('.left-content > li').eq(index).addClass('active').siblings().removeClass('active');
  $('.right-item').eq(index).addClass('showcontent').siblings().removeClass('showcontent');
})
})

jq同一页面内容切换的更多相关文章

  1. Axure 页面内多组内容切换的实现 + 利用一个内联框架实现百度地图访问

    Axure  页面内多组内容切换的实现,场景:点击某个元件的时候,会显示响应的页面 操作:将显示的页面设置为动态面板,如图所示应该设置动态面板的状态为三个状态,分别为点击qq账号.手机账号.邮箱账号时 ...

  2. vue切换路由页面内容没有重载

    项目中遇到这样一个问题: 在一个地方填了一个申请的表单,需要在另一个页面的列表上显示出来这条申请的数据,但是由于vue的缓存,在切换路由时列表上并没有及时更新数据,解决方法如下: vue路由切换时页面 ...

  3. 基于jQ+CSS3页面滚动内容元素动画特效

    今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...

  4. Vue 路由切换时页面内容刷新页面并更新数据

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...

  5. jQuery实现页面导航内容定位效果,并支持内容切换

    需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...

  6. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  7. 简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

    弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...

  8. Android开发之利用ViewPager实现页面的切换(仿微信、QQ)

    这里利用ViewPager实现页面的滑动,下面直接上代码: 1.首先写一个Activity,然后将要滑动的Fragment镶嵌到写好的Activity中. Activity的布局文件:activity ...

  9. VC/Wince 实现仿Win8 Metro风格界面2——页面滑动切换(附效果图)

    前几天开始写仿Win8 Metro界面文章,部分网友觉得不错,感谢各位的意见.本来今天一直在折腾Android VLC播放器,没时间写.不过明天休息,所以今天就抽时间先写一下. 言归正传,我们都知道W ...

随机推荐

  1. 前端jsp fetch跨域调用 is not allowed by Access-Control-Allow-Origin.

    之前我在用json跨域调用时,遇到如图问题,后来查查是官方json不支持跨域调用,后来改用非官方的jsonp跨域调用后台方法,出现如下问题 Origin http://127.0.0.1:8080 i ...

  2. Cookies and Custom Protocols

    https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/URLLoadingSystem/Cookiesa ...

  3. zabbix_server [22842]: cannot open log: cannot create semaphore set: [28] No space left on device

    zabbix server服务没启动,查看日志显示 zabbix_server [22842]: cannot open log: cannot create semaphore set: [28] ...

  4. AtCoder Regular Contest 069 F Flags 二分,2-sat,线段树优化建图

    AtCoder Regular Contest 069 F Flags 二分,2-sat,线段树优化建图 链接 AtCoder 大意 在数轴上放上n个点,点i可能的位置有\(x_i\)或者\(y_i\ ...

  5. Kubeasz部署K8s基础测试环境简介

    下面介绍使用Kubeasz部署K8s集群环境. https://github.com/easzlab/kubeasz在需要使用kubeeasz项目安装的k8s时,需要将所有需要它来部署的节点上,都安装 ...

  6. 读RAM时的时序风险

    读RAM时的时序有两个风险:1.数据已经存储好,读所需的时间.2.数据同时更新,读所需的时间节点.对于前者,只要延时足够节拍就行.对于后者,还必须要考虑数据建立的时间,同样延时的准备可能会因为数据尚未 ...

  7. 第08组 Alpha冲刺(5/6)

    队名:955 组长博客:https://www.cnblogs.com/cclong/p/11898112.html 作业博客:https://edu.cnblogs.com/campus/fzu/S ...

  8. CF859E Desk Disorder

    传送门 Luogu Solution 好好思考一下,发现人和座位构成的是一个二分图这还用想? 那么这个时候发现其实我们要求的就是这个二分图完全匹配的方案数,考虑在二分图上的一个连通块,如果是树,那么就 ...

  9. 使用List中remove方法时需要注意的问题

    String str1 = new String("1"); String str2 = new String("2"); String str3 = new ...

  10. Element + Vue I18n动态import加载国际化语言包翻译文件

    需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...