一个小功能，做个笔记：

操作流程是：导航产品有三个下拉子菜单，点击食品跳转，同时跳转出来的子页面中，选中食品这个当前项。

切换  食品  厨具   家电  三个选项卡在刷新页面的时候仍然停留在当前选中的选项。

1、使用选项卡来做应该是可以的，但是要处理一个在刷新的时候，保证选中当前项

2、我做的基本的思路：

上面是全部代码，就是判断url中锚点的值来，判断div的显示和隐藏，这样可以保证刷新的时候仍会在当前页面。

html 不刷新切换当前页面内容的更多相关文章

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

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

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

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

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

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

  4. 使用 pjax 实现无刷新切换页面

    一.目的 1.当打开链接的时候,页面是淡入显示,并且页面顶部会显示加载进度条,页面显示完成时,进度条加载满并且消失. 2.点击页面上的 a 标签时,显示加载进度条,并且当前页面淡出消失,当前页面淡出消 ...

  5. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)

    在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...

  7. js当前页面刷新并且清空文本内容的方法

    js当前页面刷新并且清空文本内容的方法: 1.js代码:location.reload(); 2.html:<body onload="document.forms[0].reset( ...

  8. jq同一页面内容切换

    $(function() { //选择标题显示 初始显示内容及样式 $('.right-content .right-item').eq(0).addClass('showcontent') $('. ...

  9. jquery页面无刷新切换皮肤并保存

    效果体验:http://runjs.cn/detail/hijgcghe <!DOCTYPE html> <html> <head> <meta http-e ...

随机推荐

  1. kvm的使用（2）

    一.远程管理kvm虚机 (2)有些情况下,有一个要配置的地方. 因为 KVM(准确说是 Libvirt)默认不接受远程管理,需要按下面的内容配置被管理宿主机中的两个文件: vim /etc/defau ...

  2. Mysql：常用操作（导入数据，用户授权，远程连接授权，设置通信缓冲区的最大长度）

    1.导入数据命令: mysql --host=localhost --port=3306 --user=root --password=hnsjt_lwsj@2018 szyszx_20180515- ...

  3. PHP进阶之路 -- 02 面向对象

    PHP进阶之路-- 之 “面向对象” 基础 概念 类的介绍和定义 类的属性 类常量 类的自动加载 构造函数和析构函数 访问控制 对象继承 范围解析操作符 static静态关键字 抽象类 对象接口 Tr ...

  4. 微信小程序遍历wx:for,wx:for-item,wx:key

    微信小程序中wx:for遍历默认元素为item,但是如果我们设计多层遍历的时候我们就需要自定义item的字段名以及key的键名 wx:for="{{item.goodsList}}" ...

  5. 6-2 shell编程基础

    shell编程基础 编程基础 Linus:Talk is cheap, show me the code 程序和编程风格 程序: 程序:算法+数据结构 数据:是程序的核心 算法:处理数据的方式 数据结 ...

  6. LeetCode.1078-两词出现后的单词(Occurrences After Bigram)

    这是小川的第392次更新,第422篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第254题(顺位题号是1078).给出单词first和单词second,以"fi ...

  7. 【VS开发】OutputWnd自动滚动

    最近在尝试VS2010中的各种新鲜插件,首先从最简单的输出窗口入手. VS2010向导中产生的输出窗口是通过CMainFrame中的COutputWnd类的对象m_wndOutput生成的.为了向输出 ...

  8. 解决Wamp的 Error D:\wamp or PHP path 错误

    之前早早就用了wamp,发现还是挺好用的,就是刚开始改端口号之类的配置有点麻烦,不过还是一一解决了. 就在昨天安装了 composer . 突然发现wamp 有一个错 “Error D:\wamp o ...

  9. Asteroid Collision

    We are given an array asteroids of integers representing asteroids in a row. For each asteroid, the ...

  10. python装饰器的原理

    装饰器的原理就是利用<闭包函数>来实现,闭包函数的原理就是包含内层函数的return和外层环境变量: