頁面重新加載後選擇某個節元素

我目前正在處理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; 
}

基本上，我的問題是，如果我選擇了第三個標籤，而阿賈克斯後做了重裝，我該如何確保第三個選項卡仍處於選中狀態，並沒有按」 t默認回到第一個。

感謝您提供的任何幫助。

來源

2012-07-03 Boardy

據我看到它，你有3種選擇：

單獨刷新每個選項卡，只刷新標籤，而不是先前選定的標籤轉換爲JavaScript整篇文章
保存的內容在Ajax調用之前變量，然後在接收和插入數據後重新選擇標籤
通過ajax調用發送預選標籤，並在後端代碼的標籤中插入一個'selected'類。

2和3實際上是一樣的 - 只是改變數據的存儲位置。

我的首選項是數字1，因爲它不需要jQuery來刷新標籤對象，並且還減少了回發的數據量。但是，如果您必須刷新整個article，則2或3會執行（2雖然可能更易於實現！）

來源

2012-07-05 22:20:42 jaypeagi

您應該通過PHP或JavaScript創建一個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') 
}

免責聲明：未經測試。

來源

2012-07-05 22:31:33 jwerre

頁面重新加載後選擇某個節元素

回答

相關問題