在页面加载上按所选类别选择Accordion H3标签

Question

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

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

问题：我正在尝试自动扩展所选类别手风琴标记，下面是我的代码。例如：如果选择的值是Switch，它是第三个<h3>标记，那么在页面加载时，它应该自动展开，而不是第一个<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表示第三，依此类推……

希望对有所帮助