【问题标题】:Drop Down Menu using PHP Switch/Case Breaks CSS使用 PHP Switch/Case Breaks CSS 的下拉菜单
【发布时间】:2014-10-26 01:55:01
【问题描述】:

我的最新网站“预防”(10 月 29 日开放)设有一个词汇表页面。目的是使用任何下拉菜单显示有关我用于最新篮球指标的术语之一的更多信息。

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

这里是相关页面的直接链接:http://preventions.wammyradio.com/glossary

说明:只需转到“得分预防”下拉菜单并选择“射击比赛”即可。这是唯一一个我已经做好充分准备的链接,因为我还没有实现该页面上的其余链接。

所有下拉菜单文字都将与您在下面看到的类似。请忽略转义引号,我在 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 为我提供了解决方法。但是现在,新的问题出现了。当我对代码进行微调和测试时,我注意到“Shot Contest”之后的所有链接都不起作用。但是,如果我先选择“射击比赛”,然后再选择另一个选项,则该操作将按要求进行。直到那时我才注意到这一点,但脚本确实会查找 URL “preventions.wammyradio.com/glossary/glossary/term”。显然,每次使用菜单访问一个术语时,下拉菜单都会在 URL 末尾添加另一个“词汇表/”。

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

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

我选择了这个或任何其他选项,这些选项都不起作用。

我需要找到一种方法来重写 URL,以免它这样做。我会进一步研究我的编码,但我认为如果 Tom 的解决方法可以针对样式、JS 文件和徽标图像完成,那么肯定有一个可以正确修剪或附加“词汇表”目录的代码。

该网址仍可用于演示。

【问题讨论】:

  • 您包含一个 txt 文件。你觉得里面的风格怎么样?
  • 您的控制台显示 404 错误。它没有加载你的css和javascript。你能分享你的模板代码吗
  • @RaheelKhan PHP 文件将相应地翻译任何 HTML 标记和代码,即使该文件是 TXT。不过,我不知道为什么。

标签: php css drop-down-menu demo


【解决方案1】:

将 method="GET" 添加到您的表单标签。
将 name="term" 添加到您的选择标签。

例如

我假设您希望它看起来像这样: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; ?>

【讨论】:

  • 在内部,是的。在人们看来,没有。这是因为我在网站的某些部分实施了 Apache 重写规则。
  • 问题是它试图从preventions.wammyradio.com/glossary/style.css而不是preventions.wammyradio.com/style.css检索style.css。请参阅我的编辑以解决问题。
  • 除了 CSS 参考之外,我还必须为徽标和 JS 文件做同样的事情。这绝对是某种逻辑错误。谢谢汤姆,非常感谢您的解决方法。
  • 对不起,汤姆,我没有检查你的答案,但我还需要你的帮助。这里解释太长了,所以我在上面编辑了我的帖子。应该会在几分钟内完成。
  • 我终于找到了问题所在。它是位置 Javascript 函数。每当我选择一个选项时,脚本都会向 URL 添加一个额外的词汇表值。为了解决这个问题,我将整个 URL 添加到每个值。如果事先没有 URL,那么它假定它是一个确切的链接或一个新目录,然后将其用作处理程序。循环重复。但是,对于 CSS、JS 和 PNG 文件仍然需要检查术语,所以我将不理会它。如果您能想出一个新的 Javascript 处理程序以便它正确处理 URL,我将不胜感激。
猜你喜欢
  • 1970-01-01
  • 2015-06-30
  • 2021-04-22
  • 1970-01-01
  • 2011-01-12
  • 1970-01-01
相关资源
最近更新 更多