如何在HTML中将选项标签链接到其他页面？

Question

我在链接我的页面方面遇到了困难。我尝试了我所知道的所有技巧（因为我刚开始学习网页设计，实际上我是一名平面设计师，只有基本的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>

- user3154388

---

如果您正在使用选择框，则可能希望包含<select>标签，而不是仅能包含<li>作为子元素的<ul>标签。 - Josh Powell

Answer 1

首先，你是想使用下拉框还是列表？

对于下拉框，如在这个问题中提到的，您可以使用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>

- Michael Garrison

---

这是一个非常棒的解决方案！ - Matheus Abreu

Answer 2

你不能直接链接它们。

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

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

如果您想使用下拉菜单，请注意以下几点：

1. 它是作为表单的一部分设计的
2. 对搜索引擎不太友好
3. 它提供了一个用户界面，但没有明确告诉用户它是一个导航工具

然后（请注意步骤4及以后是可选的）：

1. 添加表单并删除无序列表
2. 添加一个 <input type="submit" value="Go"> 按钮
3. 编写一个服务器端程序（在表单的 action 属性中引用），检查所选项的值，然后输出一个 302 Found HTTP 状态和一个包含您希望浏览器跳转到的 URL 的 Location 头。
4. 添加一个 JavaScript 事件处理程序（可以是表单的 submit 事件或选择的 change 事件）
5. 检查所选选项的值
6. 将 location 属性设置为所需的目的地
7. 取消表单的默认行为

- Quentin

Answer 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>

- Hadi Sharifi