【问题标题】:How to link option tags to other pages in html?如何将选项标签链接到 html 中的其他页面?
【发布时间】:2014-01-20 04:40:00
【问题描述】:

在链接我的网页时遇到困难。已经尝试了我知道的所有技巧(基础知识,因为我刚开始学习网页设计实际上是一名平面设计师,我只有 html 和 css 的基本知识,我对 js 或 php 等一无所知。只是为了让你知道。)但没有任何效果。希望你猜对我有帮助。以下是代码..

    <div class="fleft">
        <ul id="cd-dropdown" class="cd-select">
            <option value="-1" selected>OUR SERVICES</option>
            <option class="icon-corporate">Corporate Branding</option>
            <option class="icon-logo">Logo Designing</option>
            <option class="icon-webdesign">Web Designing</option>
            <option class="icon-camera">Photography</option>
            <option class="icon-video">Video Editting</option>
            <option class="icon-art">Illustration</option>
            <option class="icon-work">Graphic Design</option>
        </ul>
    </div>

【问题讨论】:

  • 另外,如果您使用的是选择框,那么您可能希望包含 &lt;select&gt; 标签而不是 &lt;ul&gt;,后者只能包含 &lt;li&gt; 作为子标签。

标签: html css


【解决方案1】:

首先,您尝试使用下拉框还是列表?

对于下拉菜单,如 question 中所述,您可以使用 JavaScript 执行以下操作。使用onChange 事件指定更改选择框的值时要执行的操作。然后使用window.location 告诉浏览器导航到特定页面。

<select onChange="window.location.href=this.value">
    <option value="www.google.com">A</option>
    <option value="www.aol.com">B</option>
</select>

对于列表,只需稍微更改一下语法即可。使用无序列表,然后根据自己的喜好设置样式。

<ul>
    <li><a href="www.google.com"">A</a></li>
    <li><a href="www.aol.com">B</a></li>
</ul>

【讨论】:

  • 这么好的解决方案!
【解决方案2】:

你不能将它们本身链接起来。

如果你想要一个链接列表,那么你应该有一个实际的链接列表:

<ul>
    <li><a href="...">...</a></li>
    <li><a href="...">...</a></li>
</ul>

如果你想使用选择菜单,那么你应该注意:

  1. 它被设计用作表单的一部分
  2. 对搜索引擎比较不友好
  3. 它提供的 UI 不会向用户表明它是一个导航工具

然后(注意第 4 步及以后的步骤是可选的):

  1. 添加表单并移除无序列表
  2. 添加&lt;input type="submit" value="Go"&gt; 按钮
  3. 编写一个服务器端程序(在表单的action 属性中引用)检查select 的值是什么,然后输出一个302 Found HTTP 状态和一个带有您希望的URL 的Location 标头要访问的浏览器。
  4. 添加 JavaScript 事件处理程序(在表单的 submit 事件或选择的 change 事件上)
  5. 让它检查所选选项的值
  6. location 属性设置为所需的目标
  7. 取消表单的默认行为

【讨论】:

    【解决方案3】:

    如果你要使用 ul 创建菜单,你可以使用同样的这个

     <div class="fleft">
                <ul id="cd-dropdown" class="cd-select">
                    <li value="-1" selected>OUR SERVICES</li>
                    <li class="icon-corporate">Corporate Branding</li>
                </ul>
            </div>
    

    如果你需要下拉,你应该使用

    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    

    【讨论】:

      猜你喜欢
      • 2019-06-10
      • 2018-07-11
      • 2016-02-13
      • 2013-01-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-11-17
      • 1970-01-01
      相关资源
      最近更新 更多