[英]Selecting certain section element after page reload
I am currently working on a html5 and jquery project. 我目前正在研究html5和jquery项目。 I have an html5 tab view on a page which keeps refreshing every 5 seconds.
我在页面上有一个html5标签视图,该视图每5秒刷新一次。 It refreshes by posting to a php script which retrieves information from the database and then some javascript adds the print out from the php script to a div.
它通过发布到php脚本进行刷新,该脚本从数据库中检索信息,然后一些javascript将php脚本中的打印内容添加到div中。 Before the refresh it updates another div with an ajax loading image, and once the update is complete it clears the div with
刷新之前,它将使用ajax加载图像更新另一个div,更新完成后,将使用
清除div
. 。 Because of the refresh though it always defaults to the first tab, obviously, but I need to keep it on the selected tab after the refresh.
由于刷新,尽管它总是默认默认为第一个选项卡,但是显然,刷新后我需要将其保留在所选选项卡上。
Below is the code for the tab selection. 以下是选项卡选择的代码。
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(); getEmails(); function returns the data should be displayed within each tab.
函数返回的数据应显示在每个选项卡中。
Below is the CSS 下面是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;
}
Basically, my question is if I select the 3rd tab, and the ajax post does a reload, how do I make sure that the 3rd tab is still selected and doesn't default back to the first. 基本上,我的问题是,如果我选择了第3个选项卡,而ajax帖子进行了重新加载,那么我如何确保第3个选项卡仍处于选中状态并且没有默认返回第一个选项卡。
Thanks for any help you can provide. 感谢您的任何帮助,您可以提供。
As far as I see it, you have 3 options: 据我所知,您有3种选择:
2 and 3 are effectively the same - just changing where the data is stored. 2和3实际上是相同的-只是更改了数据的存储位置。
My preference would be number 1 as it does not require the jQuery to refresh the tab object and also reduces the amount of data posted back. 我的偏好是1,因为它不需要jQuery刷新选项卡对象,而且还减少了回发的数据量。 If you must refresh the entire
article
, though, 2 or 3 would do (2 is probably easier to implement though!) 但是,如果您必须刷新整篇
article
,那么2或3可以做到(不过2可能更容易实现!)
You should create a cookie via PHP or javascript setting which tab is currently selected. 您应该通过PHP或javascript设置创建一个cookie,该cookie当前处于选中状态。 try something like:
尝试类似:
</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 );
})
then on document load 然后在文件加载时
var tabIndex = $.cookies.get('tabIndex')
if( tabIndex ) {
$('.tabs section:nth-child(' +tabIndex+ ')' ).addClass('selected')
}
disclaimer : not tested. 免责声明:未经测试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.