如何将选项标签链接到 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>

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

Answer 2

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

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

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

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

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

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

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

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>