Question

后台：用户从主页中选择类别，然后加载子页面，显示传递的ID的折叠。这个手风琴完全是根据页面加载的数据库值构建的。手风琴<h3>标签具有类别名称，下面有子类别为<ul>。

我删除了构成手风琴的数据库提取代码，并纯粹粘贴HTML。

问题：我正在尝试自动展开所选类别的手风琴标签，下面是我的代码。例如：，如果选择的值为切换，这是第3个<h3>标记，则在页面加载时，应自动展开，而不是第1个<h3>标记。我尝试了很多其他方法，但似乎无法找到解决方案。

<link href="//code.jquery.com/ui/1.11.1/themes/humanity/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

<script>

$(document).ready(function ()
{
    $("#accordion").show().accordion(
    {
        autoHeight: false,
        navigation: true,
        heightStyle: "content",
        active: 0,
        icons:
        {
            header: 'ui-icon-circle-plus',
            headerSelected: 'ui-icon-circle-arrow-n'
        }
    });
});
</script>

<div id="accordion">

    <h3 class="">Pressure Gauge</h3>

        <div>
            <ul class="ulStyle">
                <li>
                    <a href="#">Pressure Gauge</a>
                </li>
                <li>
                    <a href="#">Diff. Pressure Gauge</a>
                </li>
                <li>
                    <a href="#">Diaphragm Seal</a>
                </li>
                <li>
                    <a href="#">Snubber</a>
                </li>
                <li>
                    <a href="#">Gauge Cock</a>
                </li>
            </ul>
        </div>

    <h3 class="">Temperature Gauge</h3>
        <div>
            <ul class="ulStyle">
                <li>
                    <a href="#">Temperature Gauge</a>
                </li>
                <li>
                    <a href="#">Thermowell</a>
                </li>
            </ul>
        </div>

    <h3 class="">Switch</h3>
        <div>
            <ul class="ulStyle">
                <li>
                    <a href="#">Pressure Switch</a>
                </li>
                <li>
                    <a href="#">Temperature Switch</a>
                </li>
            </ul>
        </div>

    <h3 class="">Valves</h3>
        <div>
            <ul class="ulStyle">
                <li>
                    <a href="#">Needle Valve</a>
                </li>
                <li>
                    <a href="#">Manifold</a>
                </li>
                <li>
                    <a href="#">Single Block & Bleed</a>
                </li>
                <li>
                    <a href="#">Double Block & Bleed</a>
                </li>                   
            </ul>
        </div>  

    <h3 class="">Flow Meter</h3>
        <div>
            <ul class="ulStyle">
                <li>
                    <a href="#">Orifice Plate</a>
                </li>
                <li>
                    <a href="#">Pilot Tube</a>
                </li>
                <li>
                    <a href="#">Venturi Tube</a>
                </li>
                <li>
                    <a href="#">Aerofoil</a>
                </li>
                <li>
                    <a href="#">Flow Nozzle</a>
                </li>                   
            </ul>
        </div>

</div>

感谢您的帮助。

Answer 1

您必须在

中传递参数

active : Tab number to be activated on page load

因此，将此类别ID从主页传递到将显示该子页面的子页面默认情况下打开的类别如果你使用的是php，那么传递类别ID并在子页面上获取它并使用它：

例如，url包含参数

subpage.php?tabdID=2 // This will be the switch category ID in your case.

之后获取子页面中的tabID参数

$tabactive = $_GET['tabID'] OR $tabactive = $_REQUEST['tabID'];
$tabactive = (!empty($tabID)) ? $tabID : 1; // If empty them assign default to 1

然后在你的javascript中

$("#accordion").show().accordion({
    autoHeight: false,
    navigation: true,
    heightStyle: "content",
    active: <?php echo $tabactive; ?>, // Feed the value here and it shall work
    icons:
    {
        header: 'ui-icon-circle-plus',
        headerSelected: 'ui-icon-circle-arrow-n'
    }
});

希望有所帮助。请记住，您需要将标签ID从主页传递到子页面。 jquery UI手风琴ID从0,1,2 ......

开始

0表示第一个手风琴标签，

1表示第二，

2表示第三，依此类推........

希望有所帮助

在页面加载中为每个选定的类别选择Accordion H3标签

1 个答案: