js实现<a>超链接的跳转验证

本文介绍了一种使用HTML和JavaScript实现的网页跳转确认功能。通过点击链接弹出确认对话框,用户可以选择是否跳转到另一个页面。该方法简单实用,适用于多种网页应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<html>
<head>
<title>测试</title>
<script type="text/javascript">
function confirmFunction() {
if(confirm("是否真的要跳转?")) {
window.location.href="http://www.3156.cn";
}
}
</script>
</head>
<body>
<a href="#" onclick="confirmFunction()">跳转</a>
</body>
</html>
当点击跳转的时候会弹出一个对话框,如果“确认”,就跳转的指定的页面,如果“取消”就还留在现在的页面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>甜蜜约会</title> </head> <link rel="stylesheet" href="../css/Untitled-2.css" type="text/css"/> <script type="text/javascript" src="../js/Untitled-3.js"></script> <body> <div class="head"> <div class="left"><img src="../images1/logo.png" /></div> <div class="right"><img src="../images1/phone.jpg"/></div> </div> <div id="nav"> <ul class="nav"> <li><a href="#" class="color_in">首页</a></li> <li><a href="#">港式甜品</a></li> <li><a href="#">台式甜品</a></li> <li><a href="#">植物甜品</a></li> <li><a href="#">广府糖水</a></li> <li><a href="#">加盟我们</a></li> <li><a href="#">分店地址</a></li> </ul> </div> <div class="banner"> <ul class="banner_pic" id="banner_pic"> <li class="current"><img src="../images1/01.jpg" /></li> <li class="pic"><img class="one" src="../images1/02.jpg" /></li> <li class="pic"><img class="one" src="../images1/03.jpg"/></li> </ul> <ol id="button"> <li class="current"></li> <li class="but"></li> <li class="but"></li> </ol> </div> <div id="learn"> <h2>甜蜜约会品牌简介</h2> <dl> <dt></dt> <dd class="tex1">想和甜蜜有个约会吗?</dd> <dd class="tex2">甜品不仅女孩子喜欢,不少男孩子也不例外,在人们越来越会享受生活的今天,甜品品牌可谓风升水起,“甜蜜约会就是其中一个。”</dd> </dl> <div class="imgbox" id="imgbox"> <span> <a href="#"><img src="../images1/1.jpg"/></a> <a href="#"><img src="../images1/2.jpg"/></a> <a href="#"><img src="../images1/3.jpg"/></a> <a href="#"><img src="../images1/4.jpg"/></a> </span> </div> </div> <div id="features"> <h2>甜蜜约会特色美食推荐</h2> <div class="list0"> <div id="SwitchBigPic"> <span class="sp"><a href="#" ><img src="../images1/111.jpg" /></a></span> <span><a href="#"><img src="../images1/222.jpg" /></a></span> <span><a href="#"><img src="../images1/333.jpg" /></a></span></div> <ul id="SwitchNav"> <li><a class="txt_img1" href="#"></a></li> <li><a class="txt_img2" href="#"></a></li> <li><a class="txt_img3" href="#"></a></li> </ul> </div> <div class="list1"> <h3></h3> <form action="#" method="post" class="biaodan"> <table class="content"> <tr> <td class="left">姓名:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left">手机:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left">邮箱:</td> <td><input type="text" class="txt001" /></td> </tr> <tr> <td class="left"></td> <td> <select class="course"> <option>请选择最近店铺地址</option> <option> 北京三里屯</option> <option>上海南京路3号</option> <option>广州淮阳路12号</option> <option>深圳大都会3号/</option> </select> </td> </tr> <tr> <td colspan="2"><input class="no_border" type="button" /></td> </tr> </table> </form> </div> </div> <div class="footer">甜蜜约会版权所有2020 - 2036 京 ICP 备 2232333 号  京公网安备 2342434324343</div> </body> </html> 写一下分析
06-21
look54.php: <?php session_start(); require "../db54.php"; if(!isset($_SESSION["username"])) { header("Location: ../login54.php"); exit; } $user = $_SESSION["username"]; ?> <!DOCTYPE html> <html> <head> <title>我的购物车</title> <style> table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } img { max-width: 100px; } </style> <script> function openme(row) { row.style.backgroundColor = "#FFFFCC"; } function closeme(row) { row.style.backgroundColor = (row.rowIndex % 2 == 1 ? "#F0F0F0" : ""); } function op(button, id) { // Implement quantity increase/decrease logic } function select_all() { // Implement select all checkboxes } function reset_all() { // Implement reset all checkboxes } function delete_all() { // Implement delete selected items } function na() { return confirm("确定要移除该商品吗?"); } function op(t,id) { value=t.value; //按钮上显示的文字 if(value=='+') { //带参数跳转,兼容Google.ie parent.top.window.location="look54.php?op=add&id="+id; } if(value=='-') { parent.top.window.location="look54.php?op=sub&id="+id; } } </script> </head> <body> <h2>我的购物车</h2> <?php // 显示当用户信息 - 统一使用username if(isset($_SESSION['username'])) { echo "<p>查看购物车 | 当用户:" . htmlspecialchars($user) . "</p>"; ?> <form name="cartForm" method="post"> <table border=0 align=center width=100% cellspacing=0 bordercolordark=#9CC7EF cellpadding=4 style="line-height:35px"> <tr bgcolor="#FDF5E6"> <th>选择</th> <th>商品名称</th> <th>商品图片</th> <th>订阅数量</th> <th>单价</th> <th>操作</th> </tr> <?php // 处理"拿掉该商品"超链接删除 if(isset($_GET['id']) && $_GET["op"]=="移除") { $id = $_GET['id']; $sql = "DELETE FROM dingdan54 WHERE id = $id"; if($db54->write($sql)) { echo "<script>alert('拿掉商品成功!')</script>"; } else { echo "<script>alert('拿掉商品失败!')</script>"; echo "<script>location.href('look54.php')</script>"; } } // 处理增减按钮+-操作 if(isset($_GET["op"])) { $op = $_GET["op"]; $id = $_GET['id']; // 获取当数量 $sql = "SELECT * FROM dingdan54 WHERE id = $id"; $result = $db54->read($sql); if(count($result) > 0) { $current_num = $result[0]['num']; if($op == "add") { $new_num = $current_num + 1; } elseif($op == "sub" && $current_num > 1) { $new_num = $current_num - 1; } else { $new_num = $current_num; } // 更新数量 $update_sql = "UPDATE dingdan54 SET num = $new_num WHERE id = $id"; $db54->write($update_sql); } } // 处理"拿掉选中商品"按钮 if(isset($_GET["str"])) { $ids = explode("|", trim($_GET["str"], "|")); foreach($ids as $id) { if(is_numeric($id)) { $sql = "DELETE FROM dingdan54 WHERE id = $id"; $db54->write($sql); } } echo "<script>alert('拿掉商品成功!')</script>"; echo "<script>location.href('look54.php')</script>"; } // 显示购物车 $cart_sql = "SELECT dingdan54.id AS id, sp54.name AS name, sp54.photo AS photo, SUM(dingdan54.num) AS total_num, sp54.money AS money FROM sp54 JOIN dingdan54 ON sp54.id = dingdan54.sp_id WHERE sp54.id = dingdan54.sp_id AND dingdan54.user = '$user' AND dingdan54.flag = 0 GROUP BY sp54.id, sp54.name, sp54.photo, sp54.money"; $cart_result = $db54->read($cart_sql); $n = count($cart_result); if ($n == 0) { echo "<tr><td colspan='6'>购物车是空的!</td></tr>"; }else{ for ($i = 0; $i < $n; $i++) { $item = $cart_result[$i]; echo "<tr " . ($i % 2 == 1 ? "bgcolor='#F0F0F0'" : "") . " onmouseover='openme(this)' onmouseout='closeme(this)'>"; echo "<td><input type='checkbox' name='flag' value='{$item['id']}'></td>"; echo "<td>{$item['name']}</td>"; echo "<td><img src='images/{$item['photo']}' width='30' height='30'></td>"; echo "<td><input type='button' name='enter' value='-' onclick='op(this, {$item['id']})'> <input type='text' name='num{$item['id']}' readonly size='3' style='text-align:center' value='{$item['total_num']}'> <input type='button' name='enter' value='+' onclick='op(this, {$item['id']})'></td>"; echo "<td>{$item['money']}元</td>"; echo "<td><a href='look54.php?op=移除&id={$item['id']}' onclick='return na()'> 移除该商品</a></td>"; echo "</tr>"; } } ?> <tr align="center"> <td colspan="5" style="padding-top:8px;"> <input type="button" name="enter" value="全选" onclick="select_all()"> <input type="button" name="enter" value="全部取消" onclick="reset_all()"> <input type="button" name="enter" value="删除选中商品" onclick="delete_all()"> </td> </tr> </table> <?php $total_sql = "SELECT sp54.money AS money, dingdan54.num AS num FROM sp54, dingdan54 WHERE sp54.id = dingdan54.sp_id AND dingdan54.user = '$user' AND dingdan54.flag = 0"; $total_result = $db54->read($total_sql); $sum = 0; foreach ($total_result as $item) { $sum += $item["money"] * $item["num"]; } echo "应付金额:<b><font color=#FF0000>¥"; echo $sum . " 元"; echo " <a href='trolley54.php'>| 去付款</a>"; ?> </form> <a href="index54.php">继续购物</a> <?php } ?> </body> </html> l54.php: <?php include('../db54.php'); session_start(); $user_id=$_SESSION["id"]?? 0; $sql="select * from user54 where id='$user_id'"; $result=$db54->read($sql); $username=$result[0]["username"]; ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>信安28班54何雨霏PHP实训</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="all,follow"> <link rel="stylesheet" href="../css/bootstrap.css"> <!-- Bootstrap CSS--> <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css"> <!-- Font Awesome CSS--> <link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.7.0.css"> <!-- Fontastic Custom icon font--> <link rel="stylesheet" href="css/fontastic.css"> <!-- Google fonts - Roboto --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <!-- jQuery Circle--> <link rel="stylesheet" href="css/grasp_mobile_progress_circle-1.0.0.min.css"> <!-- Custom Scrollbar--> <link rel="stylesheet" href="vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"> <!-- theme stylesheet--> <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet"> <!-- Custom stylesheet - for your changes--> <link rel="stylesheet" href="css/custom.css"> <!-- Favicon--> <link rel="shortcut icon" href="img/favicon.ico"> <!-- Tweaks for older IEs--><!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--> </head> <body> <!-- Side Navbar --> <nav class="side-navbar"> <div class="side-navbar-wrapper"> <!-- Sidebar Header --> <div class="sidenav-header d-flex align-items-center justify-content-center"> <!-- User Info--> <div class="sidenav-header-inner text-center"><img src="img/avatar-7.jpg" alt="person" class="img-fluid rounded-circle"> <h2 class="h5">Nathan Andrews</h2><span>Web Developer</span> </div> <!-- Small Brand information, appears on minimized sidebar--> <div class="sidenav-header-logo"><a href="index.html" class="brand-small text-center"> <strong>B</strong><strong class="text-primary">D</strong></a></div> </div> <!-- Sidebar Navigation Menus--> <div class="main-menu"> <h5 class="sidenav-heading">Main</h5> <ul id="side-main-menu" class="side-menu list-unstyled"> <li><a href="../index.php"> <i class="icon-home"></i>何雨霏的留言板 </a></li> <li><a href="forms.html"> <i class="icon-form"></i>实训页面1 </a></li> <li><a href="charts.html"> <i class="fa fa-bar-chart"></i>实训页面2 </a></li> <li><a href="tables.html"> <i class="icon-grid"></i>实训页面3 </a></li> <li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"> <i class="icon-interface-windows"></i>Example dropdown </a> <ul id="exampledropdownDropdown" class="collapse list-unstyled "> <li><a href="#">admin</a></li> <li><a href="#">查看购物车</a></li> <li><a href="#">后台管理</a></li> </ul> </li> <li><a href="login.html"> <i class="icon-interface-windows"></i>Login page </a></li> <li> <a href="#"> <i class="icon-mail"></i>Demo <div class="badge badge-warning">6 New</div></a></li> </ul> </div> <div class="admin-menu"> <h5 class="sidenav-heading">Second menu</h5> <ul id="side-admin-menu" class="side-menu list-unstyled"> <li> <a href="#"> <i class="icon-screen"> </i>admin</a></li> <li> <a href=""> <i class="icon-screen"> </i>查看购物车</a></li> <li> <a href=""> <i class="icon-screen"> </i>后台管理</a></li> </ul> </div> </div> </nav> <div class="page"> <!-- navbar--> <header class="header"> <nav class="navbar"> <div class="container-fluid"> <div class="navbar-holder d-flex align-items-center justify-content-between"> <div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i class="icon-bars"> </i></a><a href="index.html" class="navbar-brand"> <div class="brand-text d-none d-md-inline-block"><span> <?php ?> </span><strong class="text-primary">信安28班54何雨霏PHP实训 <?php echo $username; ?></strong></div></a></div> <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center"> <!-- Notifications dropdown--> <li class="nav-item dropdown"> <a id="notifications" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link"><i class="fa fa-bell"></i><span class="badge badge-warning">12</span></a> <ul aria-labelledby="notifications" class="dropdown-menu"> <li><a rel="nofollow" href="#" class="dropdown-item"> <div class="notification d-flex justify-content-between"> <div class="notification-content"><i class="fa fa-envelope"></i>You have 6 new messages </div> <div class="notification-time"><small>4 minutes ago</small></div> </div></a></li> <li><a rel="nofollow" href="#" class="dropdown-item"> <div class="notification d-flex justify-content-between"> <div class="notification-content"><i class="fa fa-twitter"></i>You have 2 followers</div> <div class="notification-time"><small>4 minutes ago</small></div> </div></a></li> <li><a rel="nofollow" href="#" class="dropdown-item"> <div class="notification d-flex justify-content-between"> <div class="notification-content"><i class="fa fa-upload"></i>Server Rebooted</div> <div class="notification-time"><small>4 minutes ago</small></div> </div></a></li> <li><a rel="nofollow" href="#" class="dropdown-item"> <div class="notification d-flex justify-content-between"> <div class="notification-content"><i class="fa fa-twitter"></i>You have 2 followers</div> <div class="notification-time"><small>10 minutes ago</small></div> </div></a></li> <li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center"> <strong> <i class="fa fa-bell"></i>view all notifications </strong></a></li> </ul> </li> <!-- Messages dropdown--> <li class="nav-item dropdown"> <a id="messages" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link"><i class="fa fa-envelope"></i><span class="badge badge-info">10</span></a> <ul aria-labelledby="notifications" class="dropdown-menu"> <li><a rel="nofollow" href="#" class="dropdown-item d-flex"> <div class="msg-profile"> <img src="img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"></div> <div class="msg-body"> <h3 class="h5">Jason Doe</h3><span>sent you a direct message</span><small>3 days ago at 7:58 pm - 10.06.2019</small> </div></a></li> <li><a rel="nofollow" href="#" class="dropdown-item d-flex"> <div class="msg-profile"> <img src="img/avatar-2.jpg" alt="..." class="img-fluid rounded-circle"></div> <div class="msg-body"> <h3 class="h5">Frank Williams</h3><span>sent you a direct message</span><small>3 days ago at 7:58 pm - 10.06.2019</small> </div></a></li> <li><a rel="nofollow" href="#" class="dropdown-item d-flex"> <div class="msg-profile"> <img src="img/avatar-3.jpg" alt="..." class="img-fluid rounded-circle"></div> <div class="msg-body"> <h3 class="h5">Ashley Wood</h3><span>sent you a direct message</span><small>3 days ago at 7:58 pm - 10.06.2019</small> </div></a></li> <li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center"> <strong> <i class="fa fa-envelope"></i>Read all messages </strong></a></li> </ul> </li> <!-- Languages dropdown --> <li class="nav-item dropdown"><a id="languages" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link language dropdown-toggle"><img src="img/flags/16/GB.png" alt="English"><span class="d-none d-sm-inline-block">English</span></a> <ul aria-labelledby="languages" class="dropdown-menu"> <li><a rel="nofollow" href="#" class="dropdown-item"> <img src="img/flags/16/DE.png" alt="English" class="mr-2"><span>German</span></a></li> <li><a rel="nofollow" href="#" class="dropdown-item"> <img src="img/flags/16/FR.png" alt="English" class="mr-2"><span>French </span></a></li> </ul> </li> <!-- Log out--> <li class="nav-item"><a href="login.html" class="nav-link logout"> <span class="d-none d-sm-inline-block">Logout</span><i class="fa fa-sign-out"></i></a></li> </ul> </div> </div> </nav> </header> <section> <?php require "daohang54.php"; ?> <div class="main"> <?php require "look54.php"; ?> </div> </section> <footer class="main-footer"> <div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <p>Copyright © 信安28班54何雨霏《Web应用与安全管理实训》 All rights reserved.</p> </div> <!--<div class="col-sm-6 text-right"></div>--> </div> </div> </div> </footer> </div> <!-- JavaScript files--> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="vendor/popper.js/umd/popper.min.js"> </script> <script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script> <script src="js/grasp_mobile_progress_circle-1.0.0.min.js"></script> <script src="vendor/jquery.cookie/jquery.cookie.js"> </script> <script src="vendor/chart.js/Chart.min.js"></script> <script src="vendor/jquery-validation/jquery.validate.min.js"></script> <script src="vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script> <script src="js/charts-home.js"></script> <!-- Main File--> <script src="js/front.js"></script> </body> </html> 页面能显示look54的内容,不能显示l54的框架
06-27
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值