如何为我的分页添加格式

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重新格式化。

谢谢你，

Lee

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;
}

这是一把正在工作的小提琴。