项目开发技巧（六）：页面中链接.按钮使用的一些技巧

最新推荐文章于 2021-10-12 16:05:04 发布

success_dream

最新推荐文章于 2021-10-12 16:05:04 发布

阅读量1.2k

点赞数

分类专栏： Web开发文章标签： input button filenames javascript stylesheet css

本文链接：https://blog.csdn.net/success_dream/article/details/1403955

版权

Web开发专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在页面开发遇到了一些处理链接，按钮的问题，总结了一下，希望对大家有所帮助！

一. 点链接触发事件.

或<a οnclick="javascript:notinpropertiesturnit() " href="#">测试</a>

里面还可以更复杂一点，写入scriptlets：

<a href="javascript:notinpropertiesturnit('<%=filenames[n]%>',Content<%=n%>,Img<%=n%>,tag<%=n%>)"><%=filenames[n]%></a>

二.链接按钮

在设计网站的时，我们可能会想把链接做成按钮的样子，按钮做成链接的样子。下面说一下我的方法。
1、按钮做成链接(图片)的样子
提交按钮<input type="submit" value="提交">
提交链接<a href="#" onclick="表单名字.submit()">提交</a>

重置按钮<input type="reset" value="重置">
重置链接<a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" onclick="表单名字.reset()">重置</a>

普通按钮<input type="button" value="按钮" onclick="函数()">
普通链接<a href="#" onclick="函数()"> 链接</a>

至于图片也一样把a标签换成img

2、链接做成按钮的样子
<a href="reg.asp">注册</a>
=><input type="button" value="注册" onclick="location.href='reg.asp' _fcksavedurl='reg.asp' _fcksavedurl='reg.asp'">

-----------------------------------
有的时候我们完全可以手工做一个get方式的表单，至于用按钮还是链接随心所欲。
<form action="xx.asp" method="get" name="form1">
<input name="aa" type="text" id="aa">
<input name="bb" type="text" id="bb">
<input type="submit" name="Submit" value="提交">
</form>
=>
<input name="aa" type="text" id="aa">
<input name="bb" type="text" id="bb">
<input type="button" value="按钮" onclick="location.href='xx.asp?aa='+document.all['aa'].value+'&bb='+document.all['bb'].value">
-----------------------------------
进一步说我们还可以做一个按钮（链接）来同时传递js变量，表单input的值，asp变量，Recordset值
<script language="javascript">
var id1=1；
</script>
<%
id3=3
....
rs.open exec,conn,1,1
假设有rs("id4")=4
...
%>
<input name="id2" type="text" id="id2" value="2">
<input type="button" value="按钮"
onclick="location.href='xx.asp?id1='+id1+'&id2='+document.all['id2'].value+'&id3=<%=id3%>&id4=<%=rs("id4")%>'">
我们按下按钮会看到浏览器的url是xx.asp?id1=1&id2=2&id3=3&id4=4

三.用css实现链接的特效

我们可以用CSS语法来控制超链接的形式、颜色变化。

　　下面我们做一个这样的链接：未被点击时超链接文字无下划线，显示为蓝色；当鼠标在链接上时有下划线，链接文字显示为红色；当点击链接后，链接无下划线，显示为绿色。

　　实现方法很简单，在源代码的<head>和<head>之间加上如下的CSS语法控制：

　　<style type="text/css">
　　 style.textDecoration
　　 a:active{text-decoration:blink}
　　 a:hover{text-decoration:underline;color: red}
　　 a:visited{text-decoration: none;color:green}
　　 -->
　　 </style>

　　其中：
　　a:link 指正常的未被访问过的链接；
　　a:active 指正在点的链接；
　　a:hover 指鼠标在链接上；
　　a:visited 指已经访问过的链接；
　　text-decoration是文字修饰效果的意思；
　　none参数表示超链接文字不显示下划线；
　　underline参数表示超链接的文字有下划线

　　同样，如果讲none替换成overline则给超链接文字加上划线，换成line-through给超链接文字加上删除线，blink则使文字在闪烁

一般在项目中会用一个inc/css文件的名称来存储css文件的！然后页面中导入：

四.点按钮实现刷新页面:

总共有11种刷新方法：
<input type=button value=刷新 οnclick="history.go(0)">
<input type=button value=刷新 οnclick="location.reload()">
<input type=button value=刷新 οnclick="location=location">
<input type=button value=刷新 οnclick="location.assign(location)">
<input type=button value=刷新 οnclick="document.execCommand('Refresh')">
<input type=button value=刷新 οnclick="window.navigate(location)">
<input type=button value=刷新 οnclick="location.replace(location)">
<input type=button value=刷新 οnclick="window.open('自身的文件','_self')">