$(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. python基础语法7 闭包函数与装饰器

    闭包函数: 1.闭包函数必须在函数内部定义 2.闭包函数可以引用外层函数的名字 闭包函数是 函数嵌套.函数对象.名称空间与作用域 结合体. # 直接传参 def func(x): print(x) f ...

  2. Python中*args和**kargs如何使用

    对于初学者来说,看到*args和**kargs就头大,到底它们有何用处,怎么使用?本文将和大家一起来扒一扒,希望对大家学习python有所帮助. 1.*args 实质就是将函数传入的参数,存储在元组类 ...

  3. hihocoder#1046: K个串

    [传送门] 这种区间内相同数字只能被统计一次/只有区间内数字都不相同才对答案有贡献的题都可以用扫描线扫右端点,表示当前区间右端点为$r$.然后当前线段树/树状数组维护区间左端点为$[1,r)$时对应的 ...

  4. LeetCode 737. Sentence Similarity II

    原题链接在这里:https://leetcode.com/problems/sentence-similarity-ii/ 题目: Given two sentences words1, words2 ...

  5. Pandas模块 -- 数据类型转换,描述统计

    car=pd.read_csv(r'E:\Python\sec_cars.csv',sep=',').head(32) # print(car) print("数据集的类型:",t ...

  6. 用户管理命令——useradd、paaswd、who、w

    1.useradd和passwd命令: 其中:useradd用来添加用户,passwd用来添加用的的密码: 用户创建后可以用用户名和密码进行登录. 2.passwd:密码的更改: (1)普通用户: 只 ...

  7. kuma kong 团队开发的可视化&&安全的service mesh

    最近service mesh 的开源产品是越来越多了,好多团队都开源了自己的解决方案 maesh 最近kong 团队也开源了自己的service meshkuma 一张参考图 说明 kuma 没有基于 ...

  8. DISCO Presents Discovery Channel Code Contest 2020 Qual题解

    传送门 \(A\) 咕咕 int x,y; int c[4]={0,300000,200000,100000}; int res; int main(){ cin>>x>>y; ...

  9. Comet OJ - Contest #15 题解

    传送门 \(A\) 咕咕 const int N=1005; int a[N],n,T; int main(){ for(scanf("%d",&T);T;--T){ sc ...

  10. Linux常用命令简述--dirname与basename

    dirname 获取父目录 basename 显示最后的目录名或文件名 .dirname [root@liang ~]# dirname /etc/httpd/ /etc [root@liang ~] ...