JavaScript 基础问答 四
时间:2024-04-18 10:52:09
二、导航功能增强
1. 下拉菜单中的链接(Links in Select Menu)
Q:我如何实现在下拉菜单中链接到不同的页面?
A:要创建一个所示的下拉菜单:
你可以使用下面的代码:
<form>
<select
onChange="if(this.selectedIndex!=0)
self.location=this.options[this.selectedIndex].value">
<option value="" selected>Select a page
<option value="startpag.htm">JavaScript FAQ
<option value="numbers.htm">Numbers
<option value="strings.htm">Strings
<option value="navigati.htm">Navigation
<option value="colors.htm">Colors
<option value="http://www.javascripter.net">JavaScripter.net
</select>
</form>
只需要把菜单项及其相应的URL改为你需要就可以了。你可以使用绝对地址(就像http://www.javascripter.net),也可以使用相对地址(像 mypage.htm)。
2. 按钮链接(Button Links)
Q:我怎么才能把一个按钮变为指向另外一个页面的超链接呢?
A:要创建一个按钮就像一个:
你可以使用这段代码:
<form>
<input type=button
value="insert button text here"
onClick="self.location='Your_URL_here.htm'">
</form>
只需要改为你需要的按钮文本和目标地址。试一下这个:
你可以使用绝对地址(像http://www.javascripter.net)也可以使用相对地址(像mypage.htm)。
3. 后退按钮(Back Button)
Q:我能让按钮像浏览器的“后退”按钮一样吗?
A:要创建你自己的后退按钮,可以使用这段代码:
<form>
<input type=button value="Back"
onCLick="history.back()">
</form>
现在试一下:
4. 前进按钮(Forward Button)
Q:我能让按钮像浏览器中的“前进”按钮一样吗?
A:要创建自己的“前进”按钮,使用这段代码:
<form>
<input type=button value="Forward"
onCLick="history.forward()">
</form>
如果浏览器上的前进按钮当前不可用,那么这个“前进”按钮同样不能工作。这种情况就是当前页是你浏览历史中的最后一页。换句话说,如果你是使用浏览器的“后退”按钮到达的这个页面(或者脚本编写的后退按钮),那么这个前进按钮就可以工作。现在试一下吧!
5. 查询字符串(Query Stirngs)
Q:我的脚步可以访问当前URL中的查询字符串吗?
A:查询字符串(或搜索字符串)是URL中的一个可选部分,它跟在文件名后面,以问号引导(?)。例如,下面的URL在HTML文件名后包含了一个查询字符串 ?myquery:
http://www.myfirm.com/file.html?myquery
你的脚本可以使用JavaScript的location.search属性访问当前URL中的查询字符按。点击下面按钮试一下看看!(为了查看地址中的URL,你可能想要在顶层浏览器窗口中显示这个页面。)
创建这些按钮的代码是:
<form>
<input type=button value="Add query ?test"
onClick="selfself.location=
self.location.protocol+'//'
+self.location.host
+self.location.pathname+'?test'">
<input type=button value="Show query"
onClick="alert('Query string: '+self.location.search)">
<input type=button value="Remove query"
onClick="selfself.location=
self.location.protocol+'//'
+self.location.host
+self.location.pathname">
</form>
注意:查询字符串有时候可能不会如预期一样的工作。例如,如果你将这个页面保存本地磁盘上,上面在Internet Explorer 4.x就不会工作(但是在Netscape Navigator中依然有效)。
6. 向页面传递参数(Passing parameters to a page)
Q:我可以从也页面向另外一个页面传递参数吗?
A:可以。有几种不同的方式可以实现:
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python 用三行代码提取PDF表格数据
![](https://img.aspxhome.com/file/2023/9/99459_0s.jpg)
vue简单实现购物车结算功能
![](https://img.aspxhome.com/file/2023/2/123122_0s.jpg)
python使用arcpy.mapping模块批量出图
在SUSE10环境下安装和配置MySQL数据库
基于tkinter中ttk控件的width-height设置方式
![](https://img.aspxhome.com/file/2023/3/62563_0s.png)
window.open被浏览器拦截后的自定义提示
人民币的符号的正确表示法?一杠?两杠?¥还是¥呢?
MYSQL数据库Innodb 引擎mvcc锁实现原理
![](https://img.aspxhome.com/file/2023/7/121227_0s.webp)
golang架构设计开闭原则手写实现
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
隐蔽的ASP后门 大家可以查看下
JSP分页显示的实例代码
![](https://img.aspxhome.com/file/2023/0/97890_0s.jpg)
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
![](https://img.aspxhome.com/file/2023/1/101721_0s.gif)
Git 教程之服务器搭建详解
Python多线程通信queue队列用法实例分析
![](https://img.aspxhome.com/file/2023/4/93784_0s.png)
Vue 通过自定义指令回顾v-内置指令(小结)
![](https://img.aspxhome.com/file/2023/9/139839_0s.png)
python rolling regression. 使用 Python 实现滚动回归操作
IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法
![](https://img.aspxhome.com/file/2023/0/136740_0s.png)
详解opencv中画圆circle函数和椭圆ellipse函数
![](https://img.aspxhome.com/file/2023/9/64679_0s.png)