时间戳

首页 > 解决方案 > 我正在尝试使用 Jquery 在 Javascript 中使用“添加选项卡”方法在同一位置加载另一个页面

javascript - 我正在尝试使用 Jquery 在 Javascript 中使用“添加选项卡”方法在同一位置加载另一个页面

问题描述

我正在尝试通过 jquery 链接保存在与此相同的文件夹中的另一个 HTML 页面。我也在尝试添加一个选项卡并在选项卡中加载该页面。

我是 Jquery 的新手，我正在尝试学习如何使用它。

html代码：

<!DOCTYPE html>
<html>
<head>
  <title>Installing and using jQuery Plugins</title>

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type ="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/black-tie/jquery-ui.css"/>  
<script type="text/javascript" src="script17.js"></script>
  
</head>
<body>

  <h1 id="title">Installing and using jQuery Plugins</h1>

<div id="tabs">
  <ul>
    <li><a href='#tabs-1'>Nunc tincidunt</a></li>
    <li><a href='#tabs-2'>Proin dolor</a></li>
    <li><a href='#tabs-3'>Aenean lacinia</a></li>
  </ul>
  <div id='tabs-1'>
    <p>Junk Text1</p>
  </div>
  <div id='tabs-2'>
    <p>Junk Text2.</p>
  </div>
  <div id='tabs-3'>
    <p>Junk Text3</p>
    
  </div>
</div>

<button id='add-tab'>Add tab</button>

  <p><a href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.min.js"> Check out the themes on this page</p>
</body>
</html>

脚本

$(function(){
$("#tabs").tabs(); 

  $("#add-tab").click(function(){
  var num_tabs = $("#tabs ul li").length+1;
  $("#tabs ul").append(
     "<li><a href="+"'C9JS_16.html'"+">Click a Quote</a></li>");
  $("#tabs").tabs("refresh");
  });

});

该文件C9JS_16.html保存在与 HTML 文件相同的文件夹中。我的脚本中仍然出现 CORS 错误。

C9JS_17.html：1 从源“null”访问“file:///E:/​​Javascript/C9_JS_Fundamentals/C9JS_16.html”处的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、数据，铬扩展，边缘，https。jquery-1.8.0.min.js:2 GET file:///E:/​​Javascript/C9_JS_Fundamentals/C9JS_16.html net::ERR_FAILED

​</p>

标签： javascripthtmljquery

解决方案

推荐阅读