$(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. wordpress下一篇next_post_link函数的使用方法

    我们在用wordpress开发时经常会用到上一篇下一篇的功能,<?php previous_post_link('%link') ?> <?php next_post_link('% ...

  2. file size php

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. redux沉思录

    要素:store.reducer.dispatch/subscribe connect:将业务逻辑剥离到容器类,数据的双向绑定: 数据.操作.UI分离.命令封装 核心思想:对共享状态的维护: 核心代码 ...

  4. ZOJ3261-Connections in Galaxy War-(逆向并查集+离线处理)

    题意: 1.有n个星球,每个星球有一个编号(1-n)和一个能量值. 2.一开始将某些星球连通. 3.开战后有很多个操作,查询某个星球能找谁求救或者摧毁两颗星球之间的连通路径,使其不能连通.如果连通则可 ...

  5. 关于 Nginx 配置的一些疑惑, Nginx 根据cookie 进行rewrite

    网站目录结构如下:/public/en.html/public/zh_cn.html/public/index.php 之前所有的非静态资源请求都交给 index.php现在要把首页的请求 不走PHP ...

  6. 在服务器搭建git仓库

    使用root登录服务器 添加一个新用户(git仓库的所有者) useradd gituser # gituser---> 用户名字 设置密码 passwd gituser 配置sshd服务参数 ...

  7. web前端开发高级

    前端高效开发框架技术与应用 Vue 基础Vue 框架简介 MVX 模式介绍Vue 框架概述如何使用 Vue.js 基础语法 实例对象生命周期模板语法计算属性Methods 方法 渲染 列表渲染条件渲染 ...

  8. word2vector的tensorflow代码实现

    import collections import math import os import random import zipfile import numpy as np import urll ...

  9. lintcode-828. 字模式

    题目描述: 828.字模式 给定一个模式和一个字符串str,查找str是否遵循相同的模式.这里遵循的意思是一个完整的匹配,在一个字母的模式和一个非空的单词str之间有一个双向连接的模式对应. 样例 给 ...

  10. select多选左移右移的实现

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...