如何创建一个简单的选项卡面板,用户可以在刷新或更新后保留在当前选项卡上-jquery,php
How to create a simple tabbedpanels where a user can retain at current tab after refresh or updates - jquery,php
使用jQuery WITHOUT cookie后(刷新、提交或跳转菜单)如何保留当前选项卡。因为我的大多数朋友(他们是我的客户)在他们的终端上禁用cookie。假设jQuery已经下载。我的网站使用php、javascript、html、sql和jQuery。一个清晰的解释和一个简单的例子在不使用服务器脚本的情况下非常受欢迎。还有一件事,请不要提供链接作为答案。我已经浏览了几天的互联网,大多数例子都是中级和高级的。大多数示例都不是从头开始的,也没有更多地强调选项卡。tq。
sessionStorage
&localStorage
非常适合在未启用cookie的情况下解决此类问题。它们非常容易使用,这也是为什么作为一名开发人员,你无法理解如何实现这样的系统。下面的代码非常基本,没有涉及jQuery ~ jQuery中可能内置了一些非常容易使用的方法,但我不知道。
<form action="#">
<h1>Tabs & sessionStorage</h1>
<div id='tabs'>
<div id='t1'>tab 1</div>
<div id='t2'>tab 2</div>
<div id='t3'>tab 3</div>
<div id='t4'>tab 4</div>
</div>
</form>
<script type='text/javascript'>
/* The name of the storage Item */
var store='tabs';
/* a class name used to identify active tab */
var cn='active';
/* current value of the storage item, if any */
var cval=sessionStorage.getItem( store );
/* A nodelist of tabs within container */
var col=document.querySelectorAll('div#tabs > div');
/* Iterate through nodelist */
for( var n in col )if( col[n].nodeType==1 ){
/* assign click event handler */
col[ n ].onclick=function(event){
/* get reference to current node ( tab ) */
var el=typeof( event.target )!='undefined' ? event.target : event.srcElement;
/* set the value into storage item */
sessionStorage.setItem( store, el.id );
/* assign class to active and remove from inactive nodes */
for( var m in col ){
if( col[m].nodeType==1 ){
if( col[m].id==el.id )col[m].classList.add( cn );
else col[m].classList.remove( cn );
}
}
}
/* on load, assign active class to the correct tab */
if( cval!=null && cval==col[n].id ) col[n].classList.add( cn );
}
</script>
一个你需要调整和改进的粗略演示(相同的javascript)-应该注意的是,form
并不重要~它只是为了我的目的,所以你可以从html中省略它并更改css。对你来说,重要的是要了解如何根据事件从sessionStorage
中存储和检索项目——给出的html非常粗糙和现成——因为你发布的代码绝对没有人能指导你布局——希望这能让你开始。
<style>
form > #tabs{
width:80%;
height:180px;
display:block;
margin:0 auto;
float:none;
box-sizing:content-box;
padding:1rem;
border:1px solid black;
}
form > #tabs > div{
width:20%;
margin:0;
float:left;
clear:none;
background:whitesmoke;
text-align:center;
box-sizing:content-box;
border:1px solid black;
cursor:pointer;
}
form > #tabs > div:before{
display:block;
content:attr(data-title);
}
form > #tabs > div:hover{
background:#39F;
color:white;
}
form > #tabs > div.active{
background:#9F0;
border-left:none;
border-bottom:none;
border-right:none;
}
form > #tabs > div:first-of-type.active{
border-left:1px solid black;
}
form > #tabs > div:last-of-type.active{
border-right:1px solid black;
}
form > #tabs > div section{
display:none;
height:130px;
width:600px;
z-index:2;
top:50px;
text-align:left;
padding:1rem;
}
form > #tabs > div.active section{
display:block;
background:white;
color:black;
border:1px solid black;
}
</style>
<form action="#">
<h1>Tabs & sessionStorage</h1>
<div id='tabs'>
<div id='t1' data-title='Tab 1'>
<section><p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p></section>
</div>
<div id='t2' data-title='Tab 2'>
<section><p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p></section>
</div>
<div id='t3' data-title='Tab 3'>
<section><p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p></section>
</div>
<div id='t4' data-title='Tab 4'>
<section><p>Aliquam dapibus convallis volutpat. Vestibulum urna lacus, tempor vel diam nec, viverra gravida est. Integer pharetra tincidunt nisi, ut egestas neque porttitor ut. Quisque ut consequat erat, a accumsan ligula. Maecenas ut placerat nunc. Aliquam finibus ligula ac ex hendrerit, quis blandit sapien sollicitudin. Donec ac velit quis sapien gravida efficitur efficitur eu purus. Etiam non risus mattis, consequat diam in, commodo tellus. </p></section>
</div>
</div>
</form>
相关文章:
- 如何取消选择所选选项并将JqueryMobile中选择的值刷新为1st
- 只有当选项卡/窗口有焦点时,页面才能每5秒刷新一次
- AngularJS:点击选项卡刷新视图中的数据
- Selectbox选项在页面刷新jsp后保持选中状态
- Jquery选择菜单选项在页面刷新时失败
- 如何在不刷新页面的情况下每次单击一组选项卡时刷新视图内容窗格
- 如何自动刷新 GWT 选项卡面板中的各个选项卡
- 如何记住提交/刷新后使用的最后一个选项卡
- 页面刷新后,所选选项卡处于非活动状态
- 当我点击浏览器返回选项时,阻止在php上刷新页面
- 如何刷新'选项'ko多选组件中的绑定
- 引导程序3:返回页面刷新的下拉选项卡
- 如何在刷新后激活菜单选项卡
- 谷歌地图没有在标签2中和标签3中正确加载.如何创建刷新选项卡
- 在页面刷新时恢复下拉选择的选项
- Javascript 或 angularjs 在刷新之间延迟浏览器关闭或选项卡关闭
- Firefox DevTools:选项卡和如何在页面重新加载/刷新后保持调试器文件打开?(停止自动关闭)
- 在 AngularJS 中,用于选择不同控制器的选项 - 如何刷新
- 如何根据laravel中选择的选项刷新页面
- jQuery Datepicker-根据所选选项刷新可选择的天数