Question

我做了很多搜索，无法找到我想要的内容，而且我是HTML / JavaScript的新手。

我有一个基本网站，它有我的相机服务器（MotionEye）的主页和远程链接。我希望其他一些人使用该网站，因此我希望能够为每个用户更改站点内的链接位置。能够更改主/离线链接的最简单方法是什么？我正在使用AWS托管，因此根据AWS文档，PHP不是一个选项。我认为本地存储最有意义，但我找不到让它工作的方法。

这是我的index.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>

我的index.css文件：

.banner {

background-color:#414141;
background-attachment:fixed;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:30px;
text-align: center;
text-shadow: 2px 2px #000000;
color: #818181;
height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;      
}

body {

background-color:#414141;
background-attachment:fixed;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:15px;
height:100%;
margin:0px;
padding:0px;
text-transform:uppercase;
width:100%;     
}

.container {
display: inline-block;
cursor: pointer;
}

.bar1, .bar2, .bar3 {

width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
transition: 0.4s;
}

/* Portrait layout (default) */
.app {
color: 818181;
position: fixed;
height: 100;
width: 100%;
text-align: right;
font-size:35px;
}
/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
.app {
    background-position:left center;
    padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
    margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                  /* offset horizontal: half of image width and text area width */
}
}

h1 {
font-size:24px;
font-weight:normal;
margin:0px;
overflow:visible;
padding:0px;
text-align:center;
}

.event {
border-radius:4px;
-webkit-border-radius:4px;
color:#FFFFFF;
font-size:12px;
margin:0px 30px;
padding:2px 0px;
}

.event.listening {
background-color:#333333;
display:block;
}

.event.received {          
background-color:#4B946A;
display:none;
}

@keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}

@-webkit-keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}

.blink {
animation:fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
} 

/* The sidebar menu */
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 115px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
top: 90;
right: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}

我希望有一个相同的设置页面，可以更改索引页面上主页/离开链接的链接位置，或者，如果它更容易，则可以在一个页面中完成所有工作。理想情况下，我使用输入文本框可以更改主页/远程的href链接。越简单越好。这是我和我帮助安装摄像头的几个人的个人项目，我真的不知道如何建立一个网站。请原谅我所做的任何代码错误，因为我刚刚使用Google来获取我现在的代码。

这是我使用下面概述的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>

Answer 1

您可以使用JQuery动态更新链接。如果您提供链接id标记，则可以使用javascript轻松选择它们，并动态更新位置或使用文本框。首先，您需要将JQuery包含在您的页面中，以便

将其添加到HTML文件的底部

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

然后为您的链接提供id属性，如下所示：

<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>

然后将它与一些JQuery绑在一起

$(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
    })
})

使用local.storage进行网络链接

1 个答案: