Выпадающее меню с использованием PHP Switch / Case Breaks CSS
Мой новейший веб-сайт «Профилактики» (открытие 29 октября) содержит страницу глоссария. Цель состоит в том, чтобы использовать любое из раскрывающихся меню, чтобы показать больше информации об одном из терминов, которые я использую для своей новейшей баскетбольной метрики.
Есть одна большая проблема: каждый раз, когда я использую раскрывающееся меню для переключения на эту страницу, CSS и все связанные изображения ломаются. Результатом становится страница без стиля. Даже отладка с помощью функции Firebug не работает.
Вот прямая ссылка на данную страницу: http://preventions.wammyradio.com/glossary
Инструкции: просто перейдите в раскрывающееся меню «Профилактика очков» и выберите «Shot Contest». Это единственная ссылка, которую я полностью подготовил, поскольку мне еще предстоит реализовать остальные ссылки на этой странице.
Все описания выпадающего меню будут выглядеть так, как вы видите ниже. Пожалуйста, не обращайте внимания на escape-кавычки, я пробовал это как в PHP-скриптах, так и вне PHP как чистый HTML:
<FORM>
<SELECT onChange=\"location=this.options[this.selectedIndex].value;\">
<OPTION selected class=\"Title\">Point Preventions</OPTION>
<OPTION value=\"glossary/shotcon\">Shot Contest</OPTION>
<OPTION value=\"shotblk\">Shot Block</OPTION>
<OPTION value=\"shotstl\">Shot Steal</OPTION>
<OPTION value=\"shotoff\">Shot Charge</OPTION>
<OPTION value=\"shotvoid\">Shot Void</OPTION>
</SELECT></FORM>
Здесь, на данный момент, единственный код, который использует PHP. Пожалуйста, игнорируйте команду break, так как она, скорее всего, будет удалена с сайта:
$term = $_GET['term'];
switch ($term) {
case "shotcon":
include('dictionary/shotcon.txt');
break;
default:
break;
}
Как я могу изменить свое раскрывающееся меню, чтобы при обновлении страницы после выбора параметра CSS не пострадал?
РЕДАКТИРОВАТЬ
Спасибо Тому Хоангу за предоставленную мне возможность обойти это. Но теперь возникла новая проблема. Пока я выполнял тонкую настройку и тестирование кода, я заметил, что ни одна из ссылок после «Shot Contest» не работала. Но если я сначала выберу «Конкурс на выстрел», а затем выберу другой вариант послесловия, действие будет работать в соответствии с запросом. Я не замечал этого до тех пор, но скрипт действительно ищет URL-адрес «vention.wammyradio.com/glossary/glossary/term ». Очевидно, что каждый раз, когда меню используется для доступа к определенному термину, в раскрывающемся меню добавляется еще один «глоссарий /» в конце URL-адреса.
Странно, если бы я изменил уязвимую строку, чтобы она выглядела так:
<OPTION value=\"shotcon\">Shot Contest</OPTION>
И я выбрал этот или любой другой вариант, ни один из вариантов не будет работать.
Мне нужно найти способ переписать URL, чтобы он этого не делал. Я подробнее расскажу о своем кодировании, но я думаю, что если можно обойти Тома для стиля, файла JS и изображения логотипа, то, безусловно, есть код, который может корректно обрезать или привязать каталог «глоссарий».
URL все еще доступен для демонстрации.
Решение
Добавьте method = «GET» к вашему тегу формы.
Добавьте name = «term» в ваш тег выбора.
например < FORM method = «GET»>
< SELECT name = «term» onChange = \ «location = this.options [this.selectedIndex] .value; \»>
Я предполагаю, что вы хотите, чтобы это выглядело так: http://preventions.wammyradio.com/glossary?term=shotcon
РЕДАКТИРОВАТЬ
$term = $_GET['term'];
if($term != '')
$style = "../style.css";
else
$style = "style.css";
затем при добавлении таблицы стилей в HTML,
<link rel="stylesheet" type="text/css" href="<?php echo $style; ?>">
EDIT2
Кажется, если есть термин, игнорируйте глоссарий / часть значения параметра. Если термин отсутствует, включите глоссарий / часть к значению опции.
$term = $_GET['term'];
if($term != '')
{
$style = "../style.css";
$dropdowns = '
<table id="GlossaryBanner"><tbody><tr>
<td align="center">
<form method="GET">
<select name="term" onchange="location=this.options[this.selectedIndex].value;">
<option selected="" class="Title">Point Preventions</option>
<option value="shotcon">Shot Contest</option>
<option value="shotblk">Shot Block</option>
<option value="shotstl">Shot Steal</option>
<option value="shotoff">Shot Charge</option>
<option value="shotvoid">Shot Void</option>
</select>
</form>
</td>
<td align="center">
<form>
<select onchange="location=this.options[this.selectedIndex].value;">
<option selected="" class="Title">Possession Preventions</option>
<option value="posstl">Possession Steal</option>
<option value="posoff">Possession Charge</option>
<option value="posvoid">Possession Void</option>
<option value="posclk">Possession Clock</option>
<option value="posorb">Possession Rebound</option>
</select></form>
</td>
<td align="center">
<form>
<select onchange="location=this.options[this.selectedIndex].value;">
<option selected="" class="Title">Assist Preventions</option>
<option value="aststl">Assist Steal</option>
<option value="astoff">Assist Charge</option>
<option value="astvoid">Assist Void</option>
</select>
</form>
</td>
<td align="center">
<form>
<select onchange="location=this.options[this.selectedIndex].value;">
<option selected="" class="Title">Other</option>
<option value="screen">Screen / Pick</option>
<option value="setup">Set-up / Hockey Assist</option>
<option value="save">Possession Save</option>
<option value="delayblk">Shot Block Delay</option>
<option value="delaydef">Deflection Delay</option>
<option value="delayjmp">Jump Ball Delay</option>
<option value="help">Help (Tally)</option>
<option value="foul">Foul (Tally)</option>
<option value="assign">Assignment (Tally)</option>
</select>
</form>
</td></tr></tbody></table>';
}
else
{
$style = "style.css";
$dropdowns = '
<table id="GlossaryBanner"><tbody><tr>
<td align="center">
<form method="GET">
<select name="term" onchange="location=this.options[this.selectedIndex].value;">
<option selected="" class="Title">Point Preventions</option>
<option value="glossary/shotcon">Shot Contest</option>
<option value="glossary/shotblk">Shot Block</option>
<option value="glossary/shotstl">Shot Steal</option>
<option value="glossary/shotoff">Shot Charge</option>
<option value="glossary/shotvoid">Shot Void</option>
</select>
</form>
</td>
<td align="center">
<form>
<select onchange="location=this.options[this.selectedIndex].value;">
<option selected="" class="Title">Possession Preventions</option>
<option value="glossary/posstl">Possession Steal</option>
<option value="glossary/posoff">Possession Charge</option>
<option value="glossary/posvoid">Possession Void</option>
<option value="glossary/posclk">Possession Clock</option>
<option value="glossary/posorb">Possession Rebound</option>
</select></form>
</td>
<td align="center">
<form>
<select onchange="location=this.options[this.selectedIndex].value;">
<option selected="" class="Title">Assist Preventions</option>
<option value="glossary/aststl">Assist Steal</option>
<option value="glossary/astoff">Assist Charge</option>
<option value="glossary/astvoid">Assist Void</option>
</select>
</form>
</td>
<td align="center">
<form>
<select onchange="location=this.options[this.selectedIndex].value;">
<option selected="" class="Title">Other</option>
<option value="glossary/screen">Screen / Pick</option>
<option value="glossary/setup">Set-up / Hockey Assist</option>
<option value="glossary/save">Possession Save</option>
<option value="glossary/delayblk">Shot Block Delay</option>
<option value="glossary/delaydef">Deflection Delay</option>
<option value="glossary/delayjmp">Jump Ball Delay</option>
<option value="glossary/help">Help (Tally)</option>
<option value="glossary/foul">Foul (Tally)</option>
<option value="glossary/assign">Assignment (Tally)</option>
</select>
</form>
</td></tr></tbody></table>';
}
Затем включите переменную $ dropdowns в соответствующем месте с помощью
<?php echo $dropdowns; ?>
Другие решения
Других решений пока нет …