$(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. 转换复杂的JSON对象为 Map对象

    最近项目需要跟客户对接一个webservice接口,客户那传json串过来,属于比较复杂的json串,这里跟大家分享下我项目中所用的解析方法: 该方法需要以下jar package com.test; ...

  2. 阶段性项目 ATM+购物车项目

    ATM + 购物车https://www.cnblogs.com/kermitjam/articles/10687180.html readme 内容前戏: 一个项目是如何从无到有的. 一 需求分析 ...

  3. NameNode和SecondaryNameNode

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_37838429/artic ...

  4. idea 将java导出为可执行jar及导入jar依赖

    使用maven可以很好的帮助我们进行依赖的管理,也可以使用maven的jar包打包插件构建出可运行的jar.那针对不是用maven进行管理的普通java项目,可以通过以下方式导出可执行的jar包以及导 ...

  5. (3)使用Android手机作为树莓派的屏幕

    https://jingyan.baidu.com/album/676629977483b154d51b848e.html

  6. 网络编程——select介绍

    一.select函数简介 select一般用在socket网络编程中,在网络编程的过程中,经常会遇到许多阻塞的函数,网络编程时使用的recv, recvfrom.connect函数都是阻塞的函数,当函 ...

  7. Vue与REACT两个框架的区别和优势对比

    VUE和REACT两个JavaScript框架都是当下比较受欢迎的,他们两者之间的区别有那些,各自的优缺点是什么,本文将为你呈现. 简单介绍 除非你最近一直不关注前端的发展,不然你肯定听说过由Face ...

  8. SpringBoot2.0给所有Controller添加统一前缀

    需求 给所有Controller添加统一前缀 实现 在配置文件中添加:server.servlet.context-path: /api(不同SpringBoot版本会有区别,这里是采用2.0) 结果 ...

  9. ERA-Interim数据学习

    1.气象再分析数据有很多种,看文献里用到的主要有这几种 ECWRF——ERA-Interim,分辨率0.125°,欧洲的 MERRA-2,分辨率0.625°*0.5°,NASA的 GEOS-5FP,分 ...

  10. Linux防火墙配置方法

    1)查看防火墙状态 查看防火墙状态: /etc/init.d/iptables status 暂时关闭防火墙: /etc/init.d/iptables stop 重启防火墙: /etc/init.d ...