来自数组的foreach循环显示页面加载的所有值

时间:2015-03-12 13:47:26

标签: php jquery arrays

我有一个关联数组,其中包含用于代码的

  • 部分的jQuery导航列表标题的密钥对。见下图左侧:

    enter image description here

    问题出在右侧。右边的列表会自动填充,当它应该是选项卡的内容时,阿巴拉契亚& amp;农村研究"。当我加载页面时,会生成此页面,但是当我单击任何单个链接时,代码可以正常工作,并且只显示与正确选项卡关联的内容区域标题,请参阅下文:

    enter image description here

    以下是完成所有这些操作的代码:

    <!-- Tabbed research areas content -->
    <h4>Research Areas</h4>
    <hr></hr>
    <script type="text/javascript">
    /* <![CDATA[ */
    $(document).ready(function(){
    $("#tabs li").click(function() {
        //  First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');
    
        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("active");
    
        //  Hide all tab content
        $(".tab_content").hide();
    
        //  Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");
    
        //  Show the selected tab content
        $(selected_tab).fadeIn();
    
        //  At the end, we add return false so that the click on the link is not executed
        return false;
    });
    });
    /* ]]> */
    </script>
    <div id="tabs_wrapper">
                <div id="tabs_container">
                <?php 
                    $Researchareas = array(
                         '1' => 'Appalachian & Rural Studies',
                         '2' => 'Child Welfare',
                         '3' => 'Gerontology',
                         '4' => 'Human Trafficking',
                         '5' => 'International Social Work',
                         '5' => 'Intimate Partner Violence',
                         '7' => 'LGBTQ',
                         '8' => 'Substance Abuse and Misuse',
                         '9' => 'Suicide Survivors and Bereavement',
                         '10' => 'Trauma and Post-Traumatic Stress',
                         '11' => 'Veterans and Military Social Work'
                    );
                    ?>
                    <ul id="tabs">
                    <?php 
                        foreach ($Researchareas as $key => $value){
                            $tabname = 'tab'.$key; 
                    ?>
                        <li><a href="#<?php echo $tabname ?>"><?php echo $value ?></a></li> 
                    <?php } ?>
                    </ul>
                </div>
                <div id="tabs_content_container">
                    <?php
                    foreach ($Researchareas as $key => $value) {
                        $divtab = 'tab'.$key;
                ?>
            <div id="<?php _e($divtab); ?>" class="tab_content" style="display: block;">
            <h4><?php _e($value); ?></h4>
                </div>  
            <?php } ?>
        </div>
    </div>
    
    <!--end tabbed research content area-->
    

    我基本上只需要在页面加载时不要在完整列表中加载所有数组值,而是只需准确显示第一个选项卡,就像在第二个图像中一样。我不知道我错过了什么,但我绝对是。非常感谢任何帮助,我将永远感激。

  • 2 个答案:

    答案 0 :(得分:0)

    可能是您应该触发初始点击。您只需绑定click事件,但有人必须首先单击它以显示某些效果。所以在绑定函数之后只需添加:

    $("#tabs li:first").trigger("click");
    

    答案 1 :(得分:0)

    您应该从HTML中删除display:block,因为它会覆盖您的CSS。 如果你这样做了,它们都将是隐形的,所以你应该只需要将第一个文件放在文档准备就绪上,例如:

    $(".tab_content").first().css('display', 'block');