Question

好的，第二次发布这个问题，我第一次在错误的区域发布了这个aplogogies。我已经使用自定义css和DNNTabs插件向我们的DNN 7.02站点中的模块添加了多行，JQuery选项卡解决方案。选项卡加载并正常工作，但默认情况下在页面加载时不会折叠，它们也不会关闭单击事件上的选项卡窗格。

我包含了标记和javascript，希望你们中的一些人能够发现问题

<div id="tabs-services-row1">
<ul class="toptabs">
    <li>
    <a href="#tabs-services-1"><span class="icon-bins">&nbsp;</span> Service 1</a></li>
    <li>
    <a href="#tabs-services-2"><span class="icon-map">&nbsp;</span> Service 2</a>
    </li>
    <li>
    <a href="#tabs-services-3"><span class="icon-credit">&nbsp;</span> Service 3</a>
    </li>
    <li>
    <a href="#tabs-services-4"><span class="icon-users2">&nbsp;</span> Service 4</a>
    </li>
</ul>
<!-- BINS AND RECYCliNG TAB -->
<div id="tabs-services-1" class="tab-pane">
<ul>
    <li>
    <a href="#" title="Bin collections"><span class="icon-calendar">&nbsp;</span> S1 1</a>
    </li>
    <li>
    <a href="#"  title="blah?"><span class="icon-question">&nbsp;</span> s1 2? <!-- <span class="subitem-desc""> Here you will find this and that </span> -->
    </a>
    </li>


</ul>
</div>
<!-- End #tabs-1 -->

<div id="tabs-services-2" class="tab-pane">
<ul>
    <li>
    <a href="#"  title="blah"><span class="icon-search">&nbsp;</span> S2 1 <!-- <span class="subitem-desc"> Here you will find this and that </span> -->
    </a>
    </li>
    <li>
    <a href="#" title="S2 1"><span class="icon-office">&nbsp;</span> S2 2<!-- <span class="subitem-desc"> Here you will find this and that </span> -->
    </a>
    </li>

</ul>
</div>
<!-- End #tabs-2 -->

<div id="tabs-services-3" class="tab-pane">
<ul>
    <li>
    <a href="#"  title="Pay your council tax"><span class="icon-credit">&nbsp;</span> S3 1 <!-- <span class="subitem-desc"> Here you will find this and that </span> -->
    </a>
    </li>
    <li>
    <a href="#"  title="blah"><span class="icon-stats">&nbsp;</span> S3 2<!-- <span class="subitem-desc"> Here you will find this and that </span> -->
    </a>
    </li>


    </li>
</ul>
</div>
<!-- End #tabs-3 -->
<!-- JOBS TAB -->
<div id="tabs-services-4" class="tab-pane">
<ul>
    <li>
    <a href="#"  title="BLAH"><span class="icon-pen">&nbsp;</span> S4 1</a>
    </li>
    <li>
    <a href="#"  title="blah"><span class="icon-arrow-right">&nbsp;</span> S4 2 <!-- <span class="subitem-desc"> Here you will find this and that </span> -->
    </a>
    </li>
    <li>
    <a href="#"  title="Supported employment"><span class="icon-support">&nbsp;</span> S4 3 <!-- <span class="subitem-desc"> Here you will find this and that </span> -->
    </a>
    </li>

</ul>
</div>
<!-- End #tabs-4 -->
</div>
<!-- End row1 *************************************************************************************************************
        ************************************************************************************************************************** -->
<!--=================================================================================================================================================================================================-->
<!-- Start row2 -->
<div id="tabs-services-row2">
<ul class="toptabs">
    <li>
    <a href="#tabs-services-5"><span class="icon-calculate">&nbsp;</span> Service 5</a>
    </li>
    <li>
    <a href="#tabs-services-6"><span class="icon-earth">&nbsp;</span> Service 6</a>
    </li>


</ul>

<div id="tabs-services-5" class="tab-pane">
<ul>
    <li>
    <a href="#"  title="BLAH"><span class="icon-home-2">&nbsp;</span>S5 1 <!-- <span class="subitem-desc"> Here you will find this and that </span> -->
    </a>
    </li>
    <li>
    <a href="#" title="BLAH"><span class="icon-pie">&nbsp;</span> S5 2 <!-- <span class="subitem-desc""> Here you will find this and that </span> -->
    </a>
    </li>

    </li>
</ul>
</div>
<!-- End #tabs-5 -->

<div id="tabs-services-6" class="tab-pane">
<ul>
    <li>
    <a href="#"  title="BLAH"><span class="icon-blocked">&nbsp;</span> S6 1<!-- <span class="subitem-desc"> Here you will find this and that </span> -->
    </a>
    </li>
    <li>
    <a href="#"  title="BLAH"><span class="icon-remove">&nbsp;</span> S6 2 <!-- <span class="subitem-desc"> Here you will find this and that </span> -->
    </a>
    </li>

</ul>
</div>
<!-- End #tabs-6 -->

<div id="tabs-services-7" class="tab-pane">
<ul>
    <li>
    <a href="#" # title="BLAH"><span class="icon-search">&nbsp;</span> S7 1</a>
    </li>
    <li>
    <a href="#" title="BLAH"><span class="icon-info">&nbsp;</span> S7 2</a>
    </li>

</ul>
</div>
<!-- End #tabs-7 -->

<div id="tabs-services-8" class="tab-pane">
<ul>
    <li>
    <a href="8" title="BLAH"><span class="icon-warning">&nbsp;</span> S8 1</a>
    </li>
    <li>
    <a href="#" title="PBLAH"><span class="icon-credit">&nbsp;</span> S8 2</a>
    </li>
    <li>
    <a href="#" title="Apply for it"><span class="icon-pen">&nbsp;</span> S8 3</a>
    </li>
</ul>
</div>

</div>

现在为javascript

<script type="text/javascript">

    jQuery(function ($) {

        $("#tabs-services-row1, #tabs-services-row2").dnnTabs({
            collapsible: true,
            active: 'false', //none
            selected: -1,
            fx: { height: 'toggle', duration: 'normal'
            }
        });

    });
</script>

<script type="text/javascript">
    jQuery(function ($) {
        $("#tabs-services-row1 ul.toptabs li a").click(function () {
            $("#tabs-services-row2").Tabs('option', 'selected', -1);
        });

        $("#tabs-services-row2 ul.toptabs li a").click(function () {
            $("#tabs-services-row1,").dnnTabs('option', 'selected', -1);
        });



        $("#tabs-services-row1.tab-pane a.btn-tabs-services-close").click(function () {
            $("#tabs-services-row1, #tabs-services-row2").dnnTabs('option', 'selected', -1);
            return false;
        });


    });
</script>

我没有包含css，因为它相当大，但可以包括，如果需要，虽然class =＆＃34; dnnAdminTabNav＆＃34;可以用来测试。

Answer 1

查看以下网站http://uxguide.dotnetnuke.com/UIPatterns/Tabs.aspx 我也想念周围的事情：

<div class="dnnForm"></div>

但可以肯定这个网站会帮助你。

dnntabs插件不会在页面加载时崩溃

1 个答案: