[英]Selecting certain section element after page reload
我目前正在研究html5和jquery项目。 我在页面上有一个html5标签视图,该视图每5秒刷新一次。 它通过发布到php脚本进行刷新,该脚本从数据库中检索信息,然后一些javascript将php脚本中的打印内容添加到div中。 刷新之前,它将使用ajax加载图像更新另一个div,更新完成后,将使用
清除div
。 由于刷新,尽管它总是默认默认为第一个选项卡,但是显然,刷新后我需要将其保留在所选选项卡上。
以下是选项卡选择的代码。
function getEmailData()
{
echo '
<article class="tabs">
<section id="tab1">
<h2><a href="#tab1">Queued</a></h2>
<center><strong>Queued Emails</strong></center>
' . getEmails("Queued") . '
</section>
<section id="tab2">
<h2><a href="#tab2">Trying</a></h2>
<center><strong>Trying</strong></center>
' . getEmails("Trying") . '
</section>
<section id="tab3">
<h2><a href="#tab3">Sent</a></h2>
<center><strong>Sent Emails</strong></center>
' . getEmails("Sent") . '
</section>
<section id="tab4">
<h2><a href="#tab4">Failed</a></h2>
<center><strong>Failed Emails</strong></center>
' . getEmails("Failed") . '
</section>
</article>
';
}
getEmails(); 函数返回的数据应显示在每个选项卡中。
下面是CSS
article.tabs
{
position: relative;
display: block;
width: 40em;
height: 15em;
margin: 2em auto;
}
article.tabs section
{
position: absolute;
display: block;
/*top: 1.8em;*/
top: -10px;
left: 0;
height: 12em;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
z-index: 0;
width: 800px;
height: 300px;
}
article.tabs section:first-child
{
z-index: 1;
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
article.tabs section:nth-child(3) h2
{
left: 254px;
}
article.tabs section:nth-child(4) h2
{
left: 376px;
}
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target, article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section, article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
基本上,我的问题是,如果我选择了第3个选项卡,而ajax帖子进行了重新加载,那么我如何确保第3个选项卡仍处于选中状态并且没有默认返回第一个选项卡。
感谢您的任何帮助,您可以提供。
据我所知,您有3种选择:
2和3实际上是相同的-只是更改了数据的存储位置。
我的偏好是1,因为它不需要jQuery刷新选项卡对象,而且还减少了回发的数据量。 但是,如果您必须刷新整篇article
,那么2或3可以做到(不过2可能更容易实现!)
您应该通过PHP或javascript设置创建一个cookie,该cookie当前处于选中状态。 尝试类似:
</script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
$('.tabs section h2 a').click(function(){
var tabIndex = $(this).parents('section').first().addClass('selected').index();
$.cookies.set( 'tabIndex', tabIndex );
})
然后在文件加载时
var tabIndex = $.cookies.get('tabIndex')
if( tabIndex ) {
$('.tabs section:nth-child(' +tabIndex+ ')' ).addClass('selected')
}
免责声明:未经测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.