`
haibin369
  • 浏览: 60434 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

void与<a/>

阅读更多

在Html中,<a/>标签表示超链接,它的href属性表示要跳转的地址。但是有时候我们想在单击某个连接的时候执行一个JavaScript函数或者一段JavaScript代码,这时就可以使用void搭配Js函数来实现。

 

1.href与void

在<a/>的href属性中使用"javascript:"加上想要执行的代码来达到点击执行Js代码的目的。但是当这些Js代码的最终返回值或对象不是undefined的话(函数的默认返回值是undefined),网页的内容会被替换成表示该返回值或对象的字符串(使用toString()转换)。(Chrome中不存在该现象。)因此要使用void来忽略函数返回的值或对象。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>voidTest.html</title>
		
	<script type="text/javascript">
		//测试函数,当单击链接的时候弹出信息
		function voidTest()	
		{
			alert("Test!");
			return "From voidTest()";	//返回字符串
		}
	</script>
  </head>
  
  <body>
  	<!-- 期待的效果是单击链接弹出信息,不改变页面结构和内容 -->
  
  	<br>
  	<!-- 不使用void,点击后整个页面只有From voidTest()(Chrome不影响) -->
    <a href="javascript:voidTest()">Without void!</a>
    <br> <br>
    <!-- 使用void,点击后页面内容不改变 -->
    <a href="javascript:void voidTest()">With void!</a>
    <br> <br>	
    <!-- 也可以加括号 -->
    <a href="javascript:void(voidTest())">With void()!</a>
    
  </body>
</html>

  

 2.href、onclick与void

      当我们希望单击链接的时候执行一些Js函数,并且希望由链接的click事件触发,这个时候也要使用void来阻止超链接的跳转。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>voidTest.html</title>
	<script type="text/javascript">
		//测试函数,当单击链接的时候弹出信息
		function voidTest()	
		{
			alert("Test!");
		}
	</script>
  </head>
  
  <body>
  	<!-- 期待的效果是单击链接弹出信息 -->
  
  	<!-- 不加href,<a/>显示成普通文字而不是超链接,onclick事件无法触发 -->
    <a onclick="voidTest">Without href!</a>
    <br><br>
    <!-- 添加空的href属性,点击时会重载该页面 -->
    <a href="" onclick="voidTest">With empty href!</a>
    <br><br>
    <!-- href属性为void,正常 -->
    <a href="javascript:void" onclick="voidTest()">With javascript:void in href!</a>
    <br><br>
    <!-- href属性为void(0),正常 -->
    <a href="javascript:void(0)" onclick="voidTest()">With javascript:void(0) in href!</a>
    
  </body>
</html>

 

1
0
分享到:
评论

相关推荐

    c0扩充编译器,实现三种优化,北航计算机

    <字符> ::= _|a|...|z|A|...|Z <数字> ::= 0|<非零数字> <非零数字> ::= 1|...|9 <字符串> ::= "{&lt;合法字符&gt; }" //字符串中可以出现所有合法的可打印字符集中的字符 <程序>...

    扩充C0编译器要求 北航计算机用

    <字符> ::= _|a|...|z|A|...|Z <数字> ::= 0|<非零数字> <非零数字> ::= 1|...|9 <字符串> ::= "{&lt;合法字符&gt; }" //字符串中可以出现所有合法的可打印字符集中的字符 <程序>...

    网页设计常用的Javascript特效代码

    &lt;a href="javascript:void(null)"&gt;防止离开&lt;/a&gt; ``` 通过使用`void(null)`表达式,可以确保点击链接不会有任何实际动作发生,从而避免用户误操作导致页面关闭。 #### 8. 自动换行和表格布局 为了确保表格内容在不同...

    a标签跳转到指定div,jquery添加和移除class属性的实现方法

    &lt;a&gt;跳转到div&lt;/a&gt; &lt;div di=dction_1&gt; 这里是被跳转的区域 &lt;/div&gt; 第二个,使用jquery添加或者移除class属性 也很简单,使用jquery的方法addclass()和removeclass()属性就可以完成了。 其次,jquery的代码必须写到 ...

    images2.zip

    &lt;li&gt;&lt;a href="[removed]void(0);"&gt;图书介绍&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="[removed]void(0);"&gt;新书预告&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="[removed]void(0);"&gt;图书销售&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="[removed]void(0);"&gt;刊物发布&lt;/a&gt;&lt;/...

    tab增删选项卡

    &lt;a href="[removed]void(0)"&gt;X&lt;/a&gt; &lt;div class="line"&gt;&lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;CSS&lt;/span&gt; &lt;a href="[removed]void(0)"&gt;X&lt;/a&gt; &lt;div class="line"&gt;&lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;span&gt;jQuery&lt;/span&gt; &lt;a href="...

    nao机器人java语音源码

    /// &lt;param name="pLanguage"&gt; Language name (as a std::string). Must belong to the languages available in TTS. &lt;/param&gt; /// &lt;returns&gt; Encoding of the specified language. &lt;/returns&gt; public String ...

    c#,骑士飞行棋,.net编程,windows游戏

    /// 进行玩家A与玩家B坐标是否越界的判断 /// &lt;/summary&gt; static void CheckPos() /// &lt;summary&gt; /// 玩家掷骰子 /// &lt;/summary&gt; /// &lt;param name="playerNumber"&gt;&lt;/param&gt; static void Action(int ...

    A*算法 C#源代码

    /// &lt;param name="map"&gt;地图对象&lt;/param&gt; public AStar(Map map) { this.map = map; } /// &lt;summary&gt; /// /// &lt;/summary&gt; /// &lt;param name="map"&gt;地图对象&lt;/param&gt; /// &lt;param name="start"&gt;起点坐标&lt;/...

    jquery 仿QQ相册

    &lt;li&gt;&lt;a title="" href="javascript:void(0);"&gt;&lt;img alt="" src="pics/1.jpg"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a title="" href="javascript:void(0);"&gt;&lt;img alt="" src="pics/2.jpg"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a title=...

    vcg(验证码控件)

    &lt;br/&gt; }&lt;br/&gt;//生成随机验证码串&lt;br/&gt;private void Generate_control(int max_charnum, int min_charnum)&lt;br/&gt; {&lt;br/&gt; if (4 &gt;= min_charnum && 4 &lt;= max_charnum)&lt;br/&gt; poem_available = true;&lt;br/&gt; if (5 &gt;= ...

    用于单元测试的简单 redis java mock.zip

    &lt;dependency&gt; &lt;groupId&gt;com.github.zxl0714&lt;/groupId&gt; &lt;artifactId&gt;redis-mock&lt;/artifactId&gt; &lt;version&gt;0.1&lt;/version&gt;&lt;/dependency&gt;如何使用非常简单的方法。private static RedisServer server = null;@Beforepublic...

    html基本框架和无序列表有序列表练习、a标签和href练习实验报告.docx

    &lt;a href="javascript:void();"&gt;点我丫 3&lt;/a&gt; ``` 这些链接不会跳转到新的页面,而是触发JavaScript代码。 5. **图片插入与样式调整** 使用`&lt;img&gt;`标签插入图片,`src`属性指定图片源,`width`属性设置宽度。...

    Struts2实现分页

    &lt;tr&gt;&lt;td colspan="5"&gt;&lt;a href="input"&gt;添加用户&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;s:if test="page.hasFirst"&gt;&lt;a href="list-users?page.pageNow=&lt;s:property value="1"/&gt;"&gt;首页&lt;/a&gt;&lt;/s:if&gt; &lt;s:if test="page.hasPre"&gt;&lt;a ...

    实验1 JSP程序设计1.doc

    number=5"&gt;Calculate Square&lt;/a&gt; &lt;/body&gt; &lt;/html&gt; ``` **SquareServlet.java** ```java import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet....

    定制我的标签与默认选择我的标签.rar

    &lt;div class="plus-tag tagbtn clearfix" id="myTags"&gt;&lt;/div&gt; &lt;div class="plus-tag-add"&gt; &lt;form id="" action="" ... &lt;a href="javascript:void(0);"&gt;展开推荐标签&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/form&gt; &lt;/div&gt;

    自适应宽度的标签导航

    href="javascript:void(0)"&gt;自适应宽度的标签&lt;/A&gt; &lt;/LI&gt;&lt;/UL&gt; &lt;DIV id=tagContent&gt; &lt;DIV class=tagContent id=tagContent0&gt;第一个标签的内容&lt;/DIV&gt; &lt;DIV class="tagContent selectTag" id=tagContent1&gt;第二个标签的...

    仿飞秋,局域网聊天工具

    /// &lt;param name="text"&gt;&lt;/param&gt; private void AppString(sendData sendDatas) { int i = forms(sendDatas.fromIP); if (arryFrom[i].Forms.InvokeRequired == true) { arryFrom[i].Forms.Invoke...

    Netron3X.zip

    /// Initializes a new instance of the &lt;see cref="T:ConnectionBase"/&gt; class. /// &lt;/summary&gt; /// &lt;param name="from"&gt;From.&lt;/param&gt; /// &lt;param name="to"&gt;To.&lt;/param&gt; protected ConnectionBase(Point ...

    实用 JS滑动门

    &lt;li class="thisStyle"&gt;&lt;a href="javascript:void(0)"&gt;目录&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:void(0)"&gt;选项1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:void(0)"&gt;选项2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="javascript:void(0)"&gt;...

Global site tag (gtag.js) - Google Analytics