javascript - 如何为我的分页添加格式

Question

我正在使用以下代码创建一个表单，该表单使用 java 脚本进行分页(该论坛上有人为我提供了该脚本，我对 Java 脚本的经验不多)，我的理解是 JavaScript 只是隐藏\取消隐藏表单的标记部分。

目前，我的分页表单按钮看起来都一样，我想添加一些 CSS 样式格式来突出显示所选表单的“页码”，但到目前为止我的实验没有成功。这是我的代码:

<?php

        $PageID = 0;
echo ('<script src="https://code.jquery.com/jquery-1.11.2.js"></script>');    
echo ("\n");
        echo ('<form>');

        foreach ($ListSections as $sections)
        {
            if ($PageID == 0)
            {
                echo ('<div id="Page' . $PageID . '" class="informbdy2">');echo ("\n");
            }
            else
            {
                echo ('<div id="Page' . $PageID . '" class="informbdy2" style="display:none">');echo ("\n");
            }
            echo ("<br>");
            $PageNum = $PageID +1;
            echo ('<p style="cursor:pointer; color:black; background-color: #DBB7BA; border-radius: 8px;    border-color: #860A18; padding-left: 6px; padding-right: 6px; "> Section ' . $PageNum . ': ');
            echo ($sections[1] . "<br>");

            $QuestionNum = 0;
            foreach ($ListQs as $value)
            {
                if ($value[1] == $sections[1])
                {
                    echo ('<div ');
                    echo ('id="questionsform"');
                    echo ('name="questionsform"');
                    echo ('method="post" ');
                    echo ('action="admin_questions.php"');
                    echo ('>');

                    echo ("<input type='hidden' name='MyID' value='" . $value[0] . "'); />");

                    echo ("<table>");
                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Question' class='logintext'>Question:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Question" rows="2" cols="25">');
                    echo ("$value[3]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("</td>");
                    echo ("</tr>");

                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Answer1' class='logintext'>Answer 1:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Answer1" rows="1" cols="25">');
                    echo ("$value[4]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("<input type='radio' name='" . $QuestionNum . "ans1' value='1' >1");
                    echo ("</td>");
                    echo ("</tr>");

                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Answer2' class='logintext'>Answer 2:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Answer2" rows="1" cols="25">');
                    echo ("$value[5]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("<input type='radio' name='" . $QuestionNum . "ans2' value='2' >2");
                    echo ("</td>");
                    echo ("</tr>");

                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Answer3' class='logintext'>Answer 3:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Answer3" rows="1" cols="25">');
                    echo ("$value[6]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("<input type='radio' name='" . $QuestionNum . "ans3' value='3' >3");
                    echo ("</td>");
                    echo ("</tr>");


                    echo ("</td>");
                    echo ("</tr>");



                    echo ("</table>");
                    echo ('</div>');
                    echo ('</br>');
                    echo ('</br>');
                }               
            }
            $PageID++;
            echo ('</div>');
        }
        echo ('</div>');
        echo ('</form>' ."\n");



?>          
<?php       
        // Create Page Menu's for the form
        $PageID = 0;
        echo ('<div id="page_menus">' ."\n");
        echo ("</br>CLICK TO SELECT PAGE >> ");
        foreach ($ListSections as $PageMenu)

        {
            $mystring = '<a id="get_';
            //echo ($mystring);
            $mystring = $mystring . $PageID;
            //echo ($mystring);


            $mystring = $mystring . '"  style="cursor:pointer; color:black; background-color: #DBB7BA; border-radius: 8px;  border-color: #860A18; padding-left: 6px; padding-right: 6px; ">';

            //echo ($mystring);
            ++$PageID;
            $mystring = $mystring .  $PageID . '</a>' ."\n";
            echo ($mystring);
        }
        echo ('</div>' . "\n" . '</br>'."\n");              

        //Script to show and hide each 'Page' of the form
        echo ("\n");
        $PageID = 0;
        ?>
<script>
        <?php
        foreach ($ListSections as $ShowHide)
        {
            $MyPage = "Page" . $PageID;
            $MyGet = "get_" . $PageID;

            ?>
var my_get = <?php echo json_encode("#" . $MyGet); echo ("\n");
?>;

                $(my_get).click(function(){


                    <?php   $OtherPage = 0;
                            foreach ($ListSections as $Midsections)
                            {
                                $ThisPage = "Page" . $OtherPage;

                                if ($Midsections[1] <> $ShowHide[1])
                                {

                    ?>
var noshow_page = <?php echo json_encode("#" . $ThisPage);
?>;

$(noshow_page).hide()
                    <?php

                                }
                                else
                                {
?>

var noshow_page = <?php echo json_encode("#" . $ThisPage);?>;
$(noshow_page).show()
                    <?php
                                }
                                $OtherPage++;
                            }
                    ?>;
                })


            <?php
            $PageID++;
        }


        ?>
        </script>

如何将 CSS 类型格式添加到页面菜单项(在注释为“//为表单创建页面菜单”的部分下)以显示表单的某个“页面”已被选中？问题是网页没有重新加载，所以我不能简单地跟踪按钮按下并使用“if”样式逻辑和 CSS 重新格式化。

谢谢，

李

Answer 1

您需要添加一些 JS 来处理点击，然后您可以使用 CSS 设置样式。

HTML:

<div id="page_menus">

    <a id="get_01">1</a>
    <a id="get_02">2</a>
    <a id="get_03">3</a>
    <a id="get_04">4</a>
    <a id="get_05">5</a>

</div>

JS:

jQuery('#page_menus a').on('click', function() {

    if ($('a').hasClass('current')) {
        $('a').removeClass('current');
    }
    $(this).addClass('current');

});

CSS:

#page_menus a {
    cursor:pointer; 
    color:black; 
    background-color: #DBB7BA; 
    border-radius: 8px;  
    border-color: #860A18; 
    padding-left: 6px; 
    padding-right: 6px; 
}

#page_menus a.current {
    background-color: #ccc;
}

这是一个有效的 fiddle .