你可以添加和删除部分标签吗？基础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

回答

相关问题