[英]How to add formatting to my pagination
我正在使用以下代碼創建一個表單,該表單使用Java腳本進行了分頁(該論壇上有人為我提供了該表單,我對Java Script沒有太多的經驗),我的理解是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進行重新格式化。
謝謝,
背風處
您需要添加一些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;
}
這是工作中的小提琴 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.