Html 对Web链接使用local.storage
我已经做了大量的搜索,但找不到我想要的东西,我对HTML/JavaScript非常陌生 我有一个基本的网站,有一个家庭和我的相机服务器(MotionEye)的链接。我希望其他一些人使用该网站,所以我想能够改变从每个用户的网站内的链接位置。更改主/外链接的最简单方法是什么?我使用AWS托管,因此根据AWS文档,PHP不是一个选项。我认为本地存储是最有意义的,但我找不到一种方法使其工作 这是我的index.html页面:Html 对Web链接使用local.storage,html,input,local-storage,Html,Input,Local Storage,我已经做了大量的搜索,但找不到我想要的东西,我对HTML/JavaScript非常陌生 我有一个基本的网站,有一个家庭和我的相机服务器(MotionEye)的链接。我希望其他一些人使用该网站,所以我想能够改变从每个用户的网站内的链接位置。更改主/外链接的最简单方法是什么?我使用AWS托管,因此根据AWS文档,PHP不是一个选项。我认为本地存储是最有意义的,但我找不到一种方法使其工作 这是我的index.html页面: <!DOCTYPE html> <html> <
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>MotionEYE</title>
</head>
<body>
<!--top motion eye text-->
<div class="banner">motion eye</div>
<!--settings icon-->
<div class="container"><a href="settings.html"></div>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<!-- Side navigation -->
<div class="sidenav">
<a href="home_link_here">Home</a>
<a href="away_link_here">Away</a>
<!--button place holders-->
<a href="#" >Arm</a>
<a href="#" >Disarm</a>
</div>
</body>
</html>
我希望有一个相同的设置页面,可以更改索引页面上主/外链接的链接位置,或者,如果更简单,可以在一个页面中全部工作。理想情况下,我使用的输入文本框可以更改home/away的href链接。越简单越好。这是我和几个人的个人项目,我帮他们安装了摄像头,但我真的不知道如何建立一个网站。请原谅我所犯的任何代码错误,因为我刚刚使用谷歌来达到我现在的水平
下面是我使用下面概述的jQuery方法完成的测试页面。链接起作用,但输入框不起作用
<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<input type="text" id="home-text-field" placeholder="Update the Home Link" />
<input type="text" id="away-text-field" placeholder="Update the Away Link" />
<button type="button" id="submit" />Save Links</button>
<a id="home-link" href="http://www.google.com">Home</a>
<a id="away-link" href="http://www.yahoo.com">Away</a>
<script>
$(document).ready(function() {
let homeText = '';
let awayText = '';
//Get the DOM elements for the two links
let $homeLink = $("#home-link");
let $awayLink = $("#away-link");
// Listen for changes to the text fields by their ID
$("#home-text-field").change(function(e) {
homeText = $(this).text();
});
$("#away-text-field").change(function(e) {
awayText = $(this).text();
})
// When the button is clicked update the links
$("#submit").click(function() {
$homeLink.attr('href') = homeText;
$awayLink.attr('href') = awayText
})
})
</script>
</head>
</html>
保存链接
$(文档).ready(函数(){
让homeText='';
let awayText='';
//获取两个链接的DOM元素
设$homeLink=$(“#homeLink”);
让$awayLink=$(“#远离链接”);
//按文本字段的ID侦听对文本字段的更改
$(“#主文本字段”).change(函数(e){
homeText=$(this.text();
});
$(“#远离文本字段”).change(函数(e){
awayText=$(this.text();
})
//单击按钮后,更新链接
$(“#提交”)。单击(函数(){
$homeLink.attr('href')=homeText;
$awayLink.attr('href')=awayText
})
})
您可以使用JQuery动态更新链接。如果你给你的链接id
标记,你可以用javascript轻松地选择它们,并动态地或用文本框更新位置。首先,您需要将JQuery包含到页面中,以便
将其添加到HTML文件的底部
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
您还可以添加一些文本字段来更新链接:
<input type="text" id="home-text-field" placeholder="Update the Home Link" />
<input type="text" id="away-text-field" placeholder="Update the Away Link" />
<button type="button" id="submit" />Save Links</button>
我们需要看看你的密码。举一个例子,说明你的网站的一部分是什么样子的,以及你希望它表现如何,这会有所帮助。请看.PHP是AWS中的一个选项。Amazon静态web托管不允许使用PHP,因为:谢谢你的帮助,我真的很感激。我做了一个测试页面,把你给我的所有东西都放在一起,链接可以正常工作,但是提交按钮并没有改变我使用谷歌和雅虎作为起始链接的链接,然后试图把它们改成我的相机服务器链接,但运气不好,也许我把它们放错了?看一看,我把它添加到了最初的帖子中。
<a id="home-link" href="home_link_here">Home</a>
<a id="away-link" href="away_link_here">Away</a>
<input type="text" id="home-text-field" placeholder="Update the Home Link" />
<input type="text" id="away-text-field" placeholder="Update the Away Link" />
<button type="button" id="submit" />Save Links</button>
$(document).ready(function() {
let homeText = '';
let awayText = '';
//Get the DOM elements for the two links
let $homeLink = $("#home-link");
let $awayLink = $("#away-link");
// Listen for changes to the text fields by their ID
$("#home-text-field").change(function(e) {
homeText = $(this).text();
});
$("#away-text-field").change(function(e) {
awayText = $(this).text();
})
// When the button is clicked update the links
$("#submit").click(function() {
$homeLink.attr('href') = homeText;
$awayLink.attr('href') = awayText
})
})