$(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. RemoveError: 'setuptools' is a dependency of conda and cannot be removed from conda's operating environment.

    今天用conda install 任何包都会出现这个错误: RemoveError: 'setuptools' is a dependency of conda and cannot be remov ...

  2. Weltanschauung--世界观是人类知觉的基础架构

    世界观(德文:Weltanschauung)意思是「著眼世界之上」.这是德国知识论中所使用的语言,指的是一个「广泛世界的观念」. 它指涉的是一种人类知觉的基础架构,透过它,个体可以理解这个世界并且与它 ...

  3. PinPoint使用教程

    选择该应用的展示边界 InBound:3 OutBound:3 基本概念 APM (Application Performance Management/应用性能管理)工具 为大规模分布式系统. 开发 ...

  4. 使用overnightjs typescript 注解开发expressjs 应用

    overnightjs 提供了基于注解的expressjs应用开发,包含了比较全的express 开发支持,使用简单,以下是一个简单的试用 项目准备 项目使用pkg 进行了打包处理 初始化 yarn ...

  5. Maven配置文件POM属性最全详解

    注:本文内容来源于: BlueKitty1210 <Maven配置文件POM属性最全详解> <project xmlns="http://maven.apache.org/ ...

  6. python使用jieba实现中文文档分词和去停用词

    分词工具的选择: 现在对于中文分词,分词工具有很多种,比如说:jieba分词.thulac.SnowNLP等.在这篇文档中,笔者使用的jieba分词,并且基于python3环境,选择jieba分词的理 ...

  7. 配送城市地址联动选择JQuery

    记录一次使用jq实现3层地址联动选择流程!效果如图. 需要引入 jq.js.layer.js.layui.js.layui.css (icon图标) 二.选中后页面展示效果 三.页面展示HTML &l ...

  8. MySQL避免插入重复记录:唯一性约束

      mysql在存在主键冲突或者唯一键冲突的情况下,根据插入策略不同,一般有以下三种避免方法.1.insert ignore2.replace into3.insert on duplicate ke ...

  9. Eclipse 远程开发插件 RSE 及远程登录

    Eclispe 使用私钥登录远程服务器 生成私钥 Window --> Preference --> SSH2 --> Key Management --> Generate ...

  10. SpringBoot之KindEditor文件上传

    后端核心代码如下: package com.blog.springboot.controller; import java.io.BufferedOutputStream; import java.i ...