在CSS中 <a class="button border-red" href="javascript:void(0)" onclick="return del(17)">什么意思

时间: 2023-12-05 08:04:59 浏览: 68

[removed]void(0)是什么意思及href=#与href=javascriptvoid(0)的区别

Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。 void 操作符用法格式如下： 1. [removed]void (expression) 2. [removed]void expression expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是选的，但是写上去是一个好习惯。你以使用 void 操作符指定超级链接。表达式会被计算但是不会当前文档处装入任何内容。示例-点击超链接不跳转 1：<a></a> 2：<a></a> 3 在JavaScript中，`void`是一个操作符，它的主要作用是计算一个表达式，但不返回任何值。这在某些场景下非常有用，特别是在处理超链接（`<a>`标签）时，可以防止页面发生不必要的跳转。`void`操作符的基本语法如下： ```javascript void (expression) ``` 或者 ```javascript void expression ``` 这里的`expression`是一个JavaScript表达式，它可以是任何有效的JavaScript语句。虽然圆括号是可选的，但通常为了增强可读性，我们会使用它们来包围表达式。当我们使用`javascript:void(0)`或`javascript:void null`作为超链接的`href`属性时，点击链接将不会有任何实际的导航发生。例如： ```html <a href="javascript:void(0)">不跳转链接</a> ``` 在这个例子中，点击链接时，`javascript:void(0)`表达式被执行，但不返回任何值，因此浏览器不会进行任何页面跳转。这通常用于创建交互式的按钮或链接，它们可能触发JavaScript函数，但不需要页面重载。相比之下，`href="#"`是一个默认的锚点链接，它会将页面滚动到顶部。如果希望阻止这种行为，可以结合`onclick`事件并返回`false`，就像这样： ```html <a href="#" onclick="return false;">阻止跳转链接</a> ``` 或者使用`javascript:void(0)`： ```html <a href="javascript:void(0)" onclick="yourFunction()">调用函数链接</a> ``` 在某些情况下，`javascript:void(0)`可能在Internet Explorer中导致问题，比如停止GIF动画的播放。为避免这种情况，可以考虑使用`#`或结合`onclick`事件返回`false`。在讨论`location.href`时，如果我们直接设置`location.href`为某个URL，页面会立即跳转。但在某些情况下，我们可能希望在确认用户操作后再执行跳转，例如在删除操作中。如果链接的`href`设为`javascript:void(0)`，可以避免直接跳转，而是通过`onclick`事件触发确认对话框和实际的跳转： ```html <a href="javascript:void(0)" onclick="delete('123')">删除</a> <script> function delete(id) { if (confirm("确实要删除吗？")) { location.href = "/delete.jsp?id=" + id; } } </script> ``` 在这个例子中，`void(0)`确保在用户确认删除之前，页面不会发生跳转。另外，如果你想在一个链接上打开新窗口，有以下几种方法： 1. 使用`window.open`函数： ```javascript <a href="javascript:void(0)" onclick="window.open('url')">新窗口链接</a> ``` 2. 自定义函数： ```html <script> function openWin(tag, obj) { obj.target = "_blank"; obj.href = "Web/Substation/Substation.aspx?stationno=" + tag; obj.click(); } </script> <a href="javascript:void(0)" onclick="openWin(3, this)">LINK_TEST</a> ``` 在处理链接时，防止页面跳转的常见做法包括： 1. `href="####"` 2. `href="javascript:void(0)"` 3. `href="javascript:void null"` 4. `href="#"` 结合 `onclick="return false"` 5. 使用CSS模拟点击效果，如 `style="cursor:hand"`（但不适用于Firefox） `void(0)`和`href="#"`在JavaScript编程中扮演着不同的角色。`void(0)`用于阻止链接默认行为，`href="#"`则用于创建锚点链接。理解这些差异对于构建交互式Web页面至关重要。

？这行代码定义了一个带有 class 属性为 "button border-red" 的 <a> 标签，其中 href 属性为 "javascript:void(0)"，表示点击该链接不会跳转到其他页面，而是执行 JavaScript 代码。同时，该链接还绑定了一个 onclick 事件，当用户点击该链接时会执行 del(17) 函数，并返回其返回值。这里的 del(17) 函数可能是用于删除某个元素或数据的函数，其中参数 17 可能表示要删除的元素或数据的 ID。

阅读全文

在CSS中 <a class="button border-red" href="javascript:void(0)" onclick="return del(17)">什么意思

相关推荐

tailwindcss-border-gradients:Tailwind CSS插件生成边框图像渐变实用程序

node-red-dashboard-custom-widget:使用ui-template创建Node-RED-Dashboard UI小部件

Bootstrap-3-Tutorial-20---Button-Group-Vertical-Variation:以下视频教程的代码

Bootstrap-3-Tutorial-16---Button-Groups:以下视频教程的代码

CSS-sliding-multi-level-accordion:CSS滑动多级手风琴

test-react-ui-button:演示使用SCSS和CSS模块的react组件

Simple-Calculator-with-JS：使用HTML，CSS和JavaScript构建简单的计算器

Rock-Paper-Scissors-Game:用HTML，CSS和JavaScript制作的普通但优雅的摇滚，剪刀，剪刀游戏

Sticky-Header-With-Scroll-Down:在 html 和 css 中具有向下滚动效果的简单粘性标题

Tic-Tac-Toe-Game:这是一款经典的井字游戏，完全由HTML，CSS，Bootstrap和Javascript制作

svg-css-object-clickable:用于创建可链接动画 svg 的对象标记

js-html-css-revolut:使用JS + jQuery试用Revolut网站的菜单下拉菜单

Bootstrap-3-Tutorial-85---Togglable-Tabs:以下视频教程的代码

Bootstrap-3-Tutorial-12---Dropdown-Headers:以下视频教程的代码

Bootstrap-3-Tutorial-14---Dropdown-Dividers:以下视频教程的代码

Bootstrap-3-Tutorial-32---Nav-Tabs:以下视频教程的代码

Bootstrap-3-Tutorial-37---Nav-With-Dropdowns:以下视频教程的代码

Bootstrap-3-Tutorial-70---Linked-List-Items:以下视频教程的代码

Bootstrap-3-Tutorial-22---Single-Buttons-Dropdowns:以下视频教程的代码

最新推荐

StarModAPI: StarMade 模组开发的Java API工具包

管理建模和仿真的文件

R语言数据清洗术：Poisson分布下的异常值检测法

设计一个简易的Python问答程序

PHP疫情上报管理系统开发与数据库实现详解

"互动学习：行动中的多样性与论文攻读经历"

R语言统计推断：掌握Poisson分布假设检验

NX C++二次开发高亮颜色设置的方法

中秋节特献：明月祝福Flash动画素材

关系数据表示学习