你可以添加和刪除部分標籤嗎？基礎HTML

我想創建一個基於用戶登錄的動態「部分選項卡」。作爲'來賓'他們得到前兩個部分。如果登錄名爲'user 1'，則get部分1,2,3,5和'user 2'將獲得1,2,4,5。的HTML如下：你可以添加和刪除部分標籤嗎？基礎HTML

<div class="large-9 push-3 columns"> 
<div class="section-container tabs" data-section="tabs"> 
    <section class="section"> 
     <p class="title"><a href="#">Section 1</a></p> 
     <div class="content"> 
      <p>Content of section 1.</p> 
     </div> 
    </section> 
    <section class="section"> 
     <p class="title"><a href="#">Section 2</a></p> 
     <div class="content"> 
      <p>Content of section 2.</p> 
     </div> 
    </section> 
    <section id="chicagoSection" class="section" style="display: none"> 
     <p class="title"><a href="#">Chicago</a></p> 
     <div class="content"> 
      <p>Content of section 3.</p> 
     </div> 
    </section> 
    <section id="detroitSection" class="section" style="display: none"> 
     <p class="title"><a href="#">Detroit</a></p> 
     <div class="content"> 
      <p>Content of section 4.</p> 
     </div> 
    </section> 
    <section id="userInfo" class="section" style="display: none"> 
     <p class="title"><a href="#">RSVP</a></p> 
     <div class="content"> 
      <p>Content of section 5.</p> 
     </div> 
    </section> 
</div> 
</div>

而我javascipt的：

if (userOne) 
    { 
     document.getElementById("chicagoSection").style.display="block"; 
     document.getElementById("userInfo").style.display="block"; 
    } 
if (userTwo) 
    { 
     document.getElementById("detroitSection").style.display="block"; 
     document.getElementById("userInfo").style.display="block"; 
    }

當執行代碼時，分區選項卡被放置在彼此的頂部上。有沒有一種動態的方式去做我想做的或者我必須做的事情？另一個選擇是將整個部分封裝在一個div中並隱藏它，或者基於用戶來顯示它，但是重複該HTML對我來說太過分了。

我正在使用Foundation 4 CSS與他們固有的JavaScript。有關更多信息，無需設置'display-none'即可。

在此先感謝！

SOLUTION：

var section = document.createElement('section'); 
    var title = "Section " + count; 
    var content = "Content of new section." 

    section.className = "section"; 
    section.innerHTML ='<p class="title" style="left: ' + (count - 1) * 86 + 'px;"><a href="#">' + title + '</a></p><div class="content"><p>' + content + '</p></div>'; 
    count += 1; 
    document.getElementById('sectionContainer').appendChild(section);

我發現這個資源http://pastebin.com/QBMEJ2pq，它適用於我的目的。 86常數是在我的CSS中定義的。我知道這很有可能是一種'正確'的方法（IE創建所有元素並嵌套它們），但不幸的是我找不到這些資源。如果有人可以更好地發佈如何創建innerHTML，我將不勝感激。

來源

2013-04-09 Bob Moore

我不確定downvoting這個問題是否合適......你在做什麼**非常錯誤** - 你只是**不能**在客戶端實現安全！ – 2013-04-09 15:40:41

（忘記這與「安全性」有關）：是否可以使用絕對定位？請張貼你的CSS（如果有的話）。 – 2013-04-09 15:44:30

我的確打算實現安全性，但爲了這個問題的目的，我簡化了它。 – 2013-04-09 15:47:29

SOLUTION：

var section = document.createElement('section'); 
var title = "Section " + count; 
var content = "Content of new section." 

section.className = "section"; 
section.innerHTML ='<p class="title" style="left: ' + (count - 1) * 86 + 'px;"><a href="#">' + title + '</a></p><div class="content"><p>' + content + '</p></div>'; 
count += 1; 
document.getElementById('sectionContainer').appendChild(section);

我發現這個資源http://pastebin.com/QBMEJ2pq，它適用於我的目的。

來源

2013-04-18 22:50:36

你可以添加和刪除部分標籤嗎？基礎HTML

回答

相關問題