a href="#" onclick=""使用技巧

本文介绍了一种使用JavaScript处理伪链接的方法,通过设置返回false来防止点击时滚动条上移的问题。提供了两种实现方式,帮助开发者更好地进行网页交互设计。
使用javascript的时候,通常我们会通过类似:<a href="#" onclick="javascript:方法">提交</a>的方式,通过一个伪链接来调用javascript方法.这种方法有一个问题是:虽然点击该链接的时候不会跳转页面.但是滚动条会往上滚,解决的办法是返回一个false.如下所示:<a href="#" onclick="javascript:方法;return false;">提交</a>;或者还有一个方法是 #this <a href="#this" onclick="javascript:方法">
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单页应用示例</title> <link rel="stylesheet" href="../CSS/index.css"> </head> <body> <div class="content"> <!-- 导航栏 --> <nav class="navbar"> <ul> <li> <div class="search-container"> <input class="search-input" type="text" name="" placeholder="搜索..."> <button class="search-button" value="搜索"> <img src="../Image/搜索.png" alt="搜索"> </button> </div> </li> <li><a href="#" class="nav-link active" data-target="home">首页</a></li> <li><a href="#" class="nav-link" data-target="">山河</a></li> <li><a href="#" class="nav-link" data-target="">景致</a></li> <li><a href="#" class="nav-link" data-target="">独韵</a></li> <li><a href="#" class="nav-link" data-target="">文脉</a></li> <li><a href="#" class="nav-link" data-target="">远图</a></li> <li><a href="#" class="nav-link" data-target="">业兴</a></li> <li><a href="#" class="nav-link" data-target="">民安</a></li> <li><a href="#" class="nav-link" id="right" data-target="register">注册</a></li> </ul> </nav> <!-- 轮播图 --> <video src="" id="myVideo"> <source src="../Video/云海.mp4" type="video/mp4"> </video> <div class="content"> <div id="silder"> <ul id="list"> <li><img src="../Image/丹江.png"></li> <li><img src="../Image/丹江.png"></li> <li><img src="../Image/白河.png"></li> <li><img src="../Image/桐柏山脉.png"></li> <li><img src="../Image/唐河.png"></li> <li><img src="../Image/丹江.png"></li><!-- 把第一张图片放在最后 --> </ul> </div> </div> </div> <!-- 内容区域 --> <div class="content-container"> <!-- 首页内容 --> <section id="home" class="content-section active"> <h1>欢迎来到首页</h1> <p>这是首页内容,请点击上方导航切换页面</p> <div class="features"> <div class="feature-card">特色功能 1</div> <div class="feature-card">特色功能 2</div> <div class="feature-card">特色功能 3</div> </div> </section> <!-- 注册页内容 --> <section id="register" class="content-section"> <h2>用户注册</h2> <form id="registration-form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" required> </div> <div class="form-group"> <label for="email">邮箱:</label> <input type="email" id="email" required> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" id="password" required> </div> <button type="submit">注册</button> </form> </section> </div> <script src="../JS/index.js"></script> </body> </html> js和css已经按照上文设置为什么没有出现背景视频
最新发布
12-02
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值