如何选择.html文件并使用<select>启动它

时间:2015-08-27 19:56:42

标签: html

我正在写一个HTML页面并遇到了一个问题,我在其中制作了一个&lt; select&gt;和&lt;选项&gt;下拉式菜单。 我想知道无论如何我可以做这个&lt;选项&gt;打开Html页面? 我已经尝试了一些我在谷歌上找到的东西,它似乎不适用于这种情况。我需要使用JavaScript或其他语言吗?我对HTML或JavaScript并不熟悉。我对此很新。 &#13; &#13; &LT; HTML&GT;&#13; &LT;标题&GT;最终项目&lt; / Title&gt;&#13; &LT;风格&GT; body {background-color:Teal;}&lt; / style&gt;&#13; &LT; HEAD&GT; &lt; p Align = Center&gt; &lt;字体大小=&#34; 7&#34;颜色=红色&GT;最终项目&lt; / Font&gt;&lt; / p&gt;&#13; &lt; p align = Center&gt; &lt;字体大小=&#34; 6&#34;颜色=蓝色&GT;路由和交换&lt; / Font&gt;&lt; / p&gt;&#13; &LT; /头和GT;&#13; &LT; HEAD&GT;&#13;  &lt; style type =&#34; text / css&#34;&gt;&#13;   a:链接,a:访问{&#13;    颜色:白色;&#13;    背景颜色:黑色;&#13;    text-decoration:none;&#13;    target-new:tab;&#13;   }&#13;   a:悬停{&#13;    颜色:#0000FF;&#13;    background-color:#FFFFC0;&#13;    文字装饰:下划线;&#13;    target-new:none;&#13;   }&#13;  &LT; /风格&GT;&#13; &LT; /头&GT;&#13; &LT;身体GT;&#13;  &lt; a href =&#34; http://www.weichertrents.com/45777789/?query = cityid%3d46552&#34;&gt;建筑物&lt; / a&gt;&#13; &LT; /体&GT;&#13; &LT; HEAD&GT;&#13;  &lt; style type =&#34; text / css&#34;&gt;&#13;   a:链接,a:访问{&#13;    颜色:白色;&#13;    背景颜色:黑色;&#13;    text-decoration:none;&#13;    target-new:tab;&#13;   }&#13;   a:悬停{&#13;    颜色:#0000FF;&#13;    background-color:#FFFFC0;&#13;    文字装饰:下划线;&#13;    target-new:none;&#13;   }&#13;  &LT; /风格&GT;&#13; &LT; /头&GT;&#13; &LT;身体GT;&#13;  &lt; a href =&#34; Resources \ Floor Plan.html&#34;&gt;平面图&lt; / a&gt;&#13; &LT; /体&GT;&#13; &#13; &LT;选择&GT;&#13;   &lt; option value =&#34; Welcome Page.html&#34;&gt; Home&lt; / option&gt;&#13;   &lt; option value =&#34; \ Resources \ Floor Plan.html&#34;&gt;平面图&lt; / option&gt;&#13; &LT; /选择&GT;&#13; &#13; &lt; HR Width =&#34; 100%&#34;大小=&#34; 2&#34;颜色=&#34;紫色&#34;&GT; &LT; / hr的GT;&#13; &LT;身体与GT;&#13; &lt; p Align = Center&gt; &lt;字体颜色=黄色&gt;&lt; u&gt;资源&lt; / u&gt;&lt; / Font&gt;&#13; &lt; p Align = Center&gt;&#13; 150K&#13; &lt; p Align = Center&gt; &lt;字体颜色=黄色&gt;&lt; u&gt;得到的东西&lt; / u&gt;&lt; / Font&gt;&#13; &lt; br&gt;建筑物完成&#13; &lt; br&gt;平面图&#13; &lt; br&gt;办公室设备计算机n&#13; &LT峰; br&GT;安全&#13; &LT峰; br&GT;联网&#13; &lt; br&gt;办公用品&#13; &LT峰; br&GT;员工&#13; &LT峰; br&GT;服务器&#13; &lt; br&gt;终端&#13; &LT峰; br&GT;椅子&#13; &LT峰; br&GT;表&#13; &LT峰; br&GT; cablign&#13; &LT峰; br&GT;路由器&#13; &LT峰; br&GT;开关&#13; &LT峰; br&GT; WAPS&#13; &lt; br&gt;操作系统&#13; &LT峰; br&GT;办公室&#13; &lt; br&gt;办公室许可证&#13; &LT; / P&GT;&#13; &#13; &LT; /身体&GT;&#13; &LT; / HTML&GT;&#13; &#13; &#13;

2 个答案:

答案 0 :(得分:0)

您需要使用javascript。将您的选择标记更改为:

<select onChange="window.location = this.value">

此实现是使用javascript执行此操作的最基本方法,您可能希望实现一些其他控件(例如,检查以确保在转发之前URL是有效的。)

您必须将<option>值设置为有效路径(例如\Resources\Floor Plan.html可能应为Resources/Floor Plan.html)。

另外需要注意的是,如果您决定将绝对网址放在其中一个值中,请确保保持URL架构不变。例如大多数浏览器都不允许您以这种方式从http链接到https。这是因为此方法在技术上是重定向而不是真正的链接。

答案 1 :(得分:0)

您可以使用javascript和onchange事件。您可以使用jQuery或其他库或vanilla javascript完成此操作。

例如,在您的选择标记上添加“onchange”属性“alert(this.value)”。

<html>
<Title> Final Project</Title>
<style> body {background-color: Teal;} </style>
<Head>  <p Align=Center> <Font Size="7" Color=Red> Final Project </Font></p>
		<p align=Center> <Font Size="6" color=Blue> Routing and Switching </Font></p>
</Head>
<head>
 <style type="text/css">
  a:link,a:visited {
   color: White;
   background-color: Black;
   text-decoration: none;
   target-new: tab;
  }
  a:hover {
   color: #0000FF;
   background-color: #FFFFC0;
   text-decoration: underline;
   target-new: none;
  }
 </style>
</head>
<body>
 <a href="http://www.weichertrents.com/45777789/?query=cityid%3d46552">The building</a>
</body>
<head>
 <style type="text/css">
  a:link,a:visited {
   color: White;
   background-color: Black;
   text-decoration: none;
   target-new: tab;
  }
  a:hover {
   color: #0000FF;
   background-color: #FFFFC0;
   text-decoration: underline;
   target-new: none;
  }
 </style>
</head>
<body>
 <a href="Resources\Floor Plan.html">Floor Plan</a>
</body>

<select onchange="alert(this.value)">
  <option value="Welcome Page.html">Home</option>
  <option value="\Resources\Floor Plan.html">Floor Plan</option>
</select>

<HR Width="100%" Size="2" Color="Purple"> </hr>.
<Body>
<p Align=Center> <Font color=Yellow><u> Resources </u></Font>
<p Align=Center>
	150k
<p Align=Center> <Font color=Yellow><u> Things to get </u></Font>
	<br>A building								Done
	<br>floor plan								
	<br>office equipemnt computers n such
	<br>security
	<br>networking
	<br>office supplies
	<br>employees
	<br>Server
	<br>terminals 
	<br>chair
	<br>tables
	<br>cablign
	<br>routers
	<br>switches
	<br>Waps
	<br>operating systems
	<br>offices
	<br>licenses for office
</p>

</Body>
</HTML>