Javascript jQuery UI选项卡-带有一个容器

Javascript jQuery UI选项卡-带有一个容器,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,我想要的是这样的东西: 但在本例中,还是一般通过jqueryui选项卡!我的选项卡数与fragments content div的选项卡数相同。我想用户点击一个标签中的数字,然后在标签下面只有一个!带有图像的单个div容器。图像链接应与单击的选项卡编号一起生成,例如: 选项卡2已单击: 选项卡11已单击: 并且div容器中的图像根据生成的链接而改变。 有什么想法或工作示例/提琴吗 <div id="page-wrap"> <div id="tabs">

我想要的是这样的东西: 但在本例中,还是一般通过jqueryui选项卡!我的选项卡数与fragments content div的选项卡数相同。我想用户点击一个标签中的数字,然后在标签下面只有一个!带有图像的单个div容器。图像链接应与单击的选项卡编号一起生成,例如:

选项卡2已单击: 选项卡11已单击:

并且div容器中的图像根据生成的链接而改变。 有什么想法或工作示例/提琴吗

<div id="page-wrap">

    <div id="tabs">

        <ul>
            <li><a href="#fragment-1">1</a></li>
            <li><a href="#fragment-2">2</a></li>
            <li><a href="#fragment-3">3</a></li>
            <li><a href="#fragment-4">4</a></li>
            <li><a href="#fragment-5">5</a></li>
            <li><a href="#fragment-6">6</a></li>
            <li><a href="#fragment-7">7</a></li>
            <li><a href="#fragment-8">8</a></li>
            <li><a href="#fragment-9">9</a></li>
            <li><a href="#fragment-10">10</a></li>
            <li><a href="#fragment-11">11</a></li>
            <li><a href="#fragment-12">12</a></li>
            <li><a href="#fragment-13">13</a></li>
            <li><a href="#fragment-14">14</a></li>
            <li><a href="#fragment-15">15</a></li>
       </ul>

        <div id="fragment-1" class="ui-tabs-panel">
               <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
        </div>

        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
                <p>Donec ultricies senectus tristique egestas vitae, et ac morbi habitant quam sit mi quam, malesuada leo. Vestibulum tempor Mauris tortor libero eget, egestas. eu vitae feugiat netus amet Pellentesque ante. amet, ultricies eleifend turpis sit placerat et semper. Aenean est. fames </p>
        </div>

        <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
                <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor ultricies tempor quam sit </p>
        </div>

        <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">

        </div>

        <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide">

        </div>

        <div id="fragment-6" class="ui-tabs-panel ui-tabs-hide">

        </div>

        <div id="fragment-7" class="ui-tabs-panel ui-tabs-hide">

        </div>

        <div id="fragment-8" class="ui-tabs-panel ui-tabs-hide">

        </div>

        <div id="fragment-9" class="ui-tabs-panel ui-tabs-hide">

        </div>

        <div id="fragment-10" class="ui-tabs-panel ui-tabs-hide">

        </div>

        <div id="fragment-11" class="ui-tabs-panel ui-tabs-hide">

        </div>

        <div id="fragment-12" class="ui-tabs-panel ui-tabs-hide">

        </div>

        <div id="fragment-13" class="ui-tabs-panel ui-tabs-hide">

        </div>

        <div id="fragment-14" class="ui-tabs-panel ui-tabs-hide">

        </div>

        <div id="fragment-15" class="ui-tabs-panel ui-tabs-hide">
            <p>The end.</p>
        </div>

    </div>

</div>
问候
约翰

你能为需要帮助的人提供一些代码吗?谢谢。另外,你的托管图像不工作。链接只是我找到的一个例子。我需要一些有图像的东西。我发布了一些代码,显示有15个!为内容添加div。嗯,也许可以做一把小提琴让我们看看问题出在哪里。