Как добавить форматирование в мою разбивку на страницы

Question

Я использую следующий код для создания формы, которая разбивается на страницы с использованием java-скрипта (что кто-то на этом форуме предоставил мне, у меня нет большого опыта работы с Java Script) я понимаю, что JavaScript просто скрывает \ unhides помеченные разделы формы.

В настоящее время мои кнопки для разбивки на страницы выглядят одинаково, я хотел бы добавить форматирование стиля 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; 
} 

Вот рабочий fiddle.

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.