0

我正在尝试根据用户登录创建一个动态的“部分选项卡”。作为“客人”，他们得到前两个部分。如果以“用户 1”登录，则获取部分 1、2、3、5 和“用户 2”获取 1、2、4、5。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。有关附加信息，如果不设置“显示-无”，这些部分就可以了。

提前致谢！

解决方案：

    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 中定义的。我知道很可能有一种“正确”的方法来做到这一点（即创建所有元素并嵌套它们），但不幸的是我找不到资源。如果有人可以发布如何更好地创建 innerHTML，我将不胜感激。

4

1 回答 1

0

解决方案：

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-18T22:50:36.387 回答