Question

我试图用jQuery开发垂直标签插件，只是为了学习。我遇到了几个例子，一个是jQuery自己的插件，另一个是插件。他们使用无序列表和使用 div 元素的内容实施标签。在这种情况下，虽然我没有看到为什么会发生这种情况的原因，但javascript无法正常工作或未启用，它们看起来像一堆列表项，后跟随机无关的内容。

由于我刚刚学习，我直观地做了这个简单的标记：

<ul id="vTabs">
    <li id="tabs">
        <div id="tab_1">Show 1</div>
             <div id="tab_2">Show 2</div>
    </li>
    <li id="content">
        <div id="content_1">this is data div 1</div>
        <div id="content_2">this is data div 2</div>
    </li>
</ul>

有人可以通过告诉我这是坏还是好还是好来指导我？我要继续这个动手吗？

Answer 1

页面上永远不应该有2个具有相同ID的元素，就像结构中的情况一样。

你有没有理由不去找你已经找到的东西？使用id属性将标签作为列表项链接到div元素？这样的事情非常灵活：

<ul class="tabs">
  <li><a href="#panel_1">Tab 1</a></li>
  <li><a href="#panel_2">Tab 2</a></li>
  <li><a href="#panel_3">Tab 3</a></li>
</ul>
<div class="panels">
  <div id="panel_1" class="panel">Foo</div>
  <div id="panel_2" class="panel">Bar</div>
  <div id="panel_3" class="panel">Hi</div>
</div>

Answer 2

我的理解是你这样做是为了学习jQuery。

最简单的过程是：

使用Simshaun建议的HTML布局，您可以将“面板”DIV（隐藏所有单独的“面板”DIV）浮动到“标签”UL的右侧，并在“A”上设置“单击”处理程序标签可以为所选“面板”DIV的宽度设置动画。

一旦你有了这个工作，你可以通过CSS更好地设计它，使它看起来更漂亮。

此致尼尔

更好的格式来开发垂直标签插件？

2 个答案: