使用PHP Switch / Case Breaks CSS下拉菜单

时间:2014-10-26 01:55:02

标签: php css drop-down-menu demo

我的最新网站Preventions(10月29日开放)提供词汇表页面。目标是使用任何下拉菜单来显示有关我用于最新篮球指标的其中一个术语的更多信息。

有一个大问题:每次我使用下拉菜单切换到该页面时,CSS和所有关联图像都会被破坏。结果变成了无风格的页面。甚至没有通过Firebug功能进行调试。

以下是相关网页的直接链接:http://preventions.wammyradio.com/glossary

说明:只需转到Points Preventions下拉菜单,然后选择" Shot Contest。"这是我已经做好充分准备的唯一链接,因为我还没有实现该页面上的其余链接。

所有下拉菜单的注释都与您在下面看到的一样。请忽略转义引号,我已经在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没有受到伤害?

修改

感谢Tom Hoang为我提供了解决方法。但现在,出现了一个新问题。虽然我很好地调整和测试代码,但我注意到没有任何链接过去&#34; Shot Contest&#34;工作。但是如果我选择了#34; Shot Contest&#34;首先,然后选择另一个选项后记,该操作将按要求工作。直到那时我才注意到这一点,但脚本确实在寻找URL&#34; preventions.wammyradio.com/glossary/glossary/term。&#34;显然,每次使用菜单访问一个术语时,下拉菜单都会在另一个&#34;词汇表/&#34;到URL的末尾。

奇怪的是,如果我将受影响的行更改为如下所示:

<OPTION value=\"shotcon\">Shot Contest</OPTION>

我选择了这个或任何其他选项,没有一个选项可以使用。

我需要找到一种方法来重写URL,以便它不会这样做。我将进一步研究我的编码,但我认为如果Tom的解决方法可以用于样式,JS文件和徽标图像,那么肯定有一个代码可以修剪或修复&#34 ;词汇表&#34;目录正确。

该网址仍可供演示使用。

1 个答案:

答案 0 :(得分:0)

添加方法=&#34; GET&#34;到你的表格标签。
添加名称=&#34;术语&#34;到你的选择标签。

e.g。 &LT; FORM方法=&#34; GET&#34;&gt;
&LT; SELECT name =&#34; term&#34;的onChange = \&#34;位置= this.options [this.selectedIndex]。价值; \&#34;&GT;

我认为你希望它看起来像这样: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; ?>