Jquery在一个页面上有多个选项卡框

我仍在学习jQuery的基础知识，我已经设法使这个选项卡框适用于页面上的单个选项卡框，但我需要在页面上放置几个选项卡框。 当我在页面上放置多个选项卡框时，它会隐藏除所选选项卡之外的所有选项卡框上的所有内容。 如何修改jQuery，使其隐藏选定选项卡区域上的选项卡，而不隐藏其他选项卡部分上的所有内容框

HTML:

<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">

    <ul class="tabs">
        <li><a href="#" title="content_1" class="tab active">name</a></li>
        <li><a href="#" title="content_2" class="tab">about</a></li>
        <li><a href="#" title="content_3" class="tab">skills</a></li>
    </ul>

    <div id="content_1" class="content">
        <p>name 1</p>
    </div>

    <div id="content_2" class="content">
      <p>about 1</p>
    </div>

    <div id="content_3" class="content">
       <p>skills 1</p>
    </div>

</div><!--END Tabbed_area-->

 </div><!--END Tabbed_box_1-->

  <div id="tabbed_box_2" class="tabbed_box">
  <div class="tabbed_area">

    <ul class="tabs">
        <li><a href="#" title="content_4" class="tab active">name</a></li>
        <li><a href="#" title="content_5" class="tab">about</a></li>
        <li><a href="#" title="content_6" class="tab">skills</a></li>
    </ul>

    <div id="content_4" class="content">
        <p>name 2</p>
    </div>

    <div id="content_5" class="content">
      <p>about 2</p>
    </div>

    <div id="content_6" class="content">
       <p>skills 2</p>
    </div>

  </div><!--END Tabbed_area-->

  </div><!--END Tabbed_box_2-->

css:

您可以创建一个。例如：

$.fn.tabbedBox = function() {…}

然后你称之为：

$('.tabbed_box').tabbedBox()

---

由于您的插件将jquery调用绑定到此，因此您的代码可以重用，而不会影响此页面上的其他元素（如其他选项卡框）。

在这里您可以找到答案

你也可以发布相关的CSS吗？另外，您能否澄清当用户单击时，您希望显示和隐藏哪些内容？添加了css，我希望在divs content div中使用-content_4这样的ID显示内容，因此当第二个选项卡部分上的按钮被单击或聚焦时，它会显示content_4 div，但是不隐藏tabbed_box_1中的内容，比如content_1，这样我就可以把我写的所有jQuery放到$.fn.tabbedBox函数{}中，然后它就可以工作了。我如何在页面中调用插件？我已经将其放入插件中，但它仍然不工作。你知道为什么它不工作吗？我们需要查看你的新代码。你能给你的问题添加一个更新或者链接到一个来源吗？

$.fn.tabbedBox = function() {…}

$('.tabbed_box').tabbedBox()