Question

我想建立一个简单的网页来存储信息，以使我的工作更轻松一些，我一直在使用网络上的示例并对它们进行反向工程以尝试弄清它们的工作原理。

到目前为止，我已经能够从XML文件中填充下拉菜单，但是还无法弄清楚如何使每个菜单项具有自己的特定网址，最终它们将指向用于各种设备的基于Web的系统配置的IP地址。

我确定我只需要在xml元素中添加URL信息，并在将其添加到下拉菜单时以某种方式将其解析为可点击的URL，但是尽管我拖网了，但这种方法还是使我难以理解。

谢谢。

<!DOCTYPE html>
<html>
<head>
<title>TECHNICIAN PORTAL</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body bgcolor="Grey">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<header class="w3-container tech-theme w3-padding" id="myHeader">
<div class="tech-center">
<h1 class="w3-xxxlarge w3-animate-bottom">TECHNICIAN PORTAL</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge tech-modal-hover tech-modal-nohover" onclick="document.getElementById('id05').style.display='block'" style="font-weight:900;">SOFTWARE</button>
</header>

<div id="id05" class="tech-modal">
<div class="tech-modal-content tech-card w3-animate-top">
<header class="w3-container tech-theme-l1">
<span onclick="document.getElementById('id05').style.display='none'" class="w3-button tech-display-topright">X</span>
<h4>SOFTWARE</h4>
</header>
<div class="modal-list">
<nav role="navigation">
<ul class="dropdown">
<li id="powersystems1"></li>
</ul>
</nav>
</div>
<footer class="w3-container tech-theme-l1">
<p></p>
</footer>
</div>
</div>

<script>
$(document).ready(function () {

var li = $('<li/>')
.appendTo('#powersystems1');

$('<a />')
.text('APPLICATIONS')
.attr('href', '#')
.appendTo(li);     // ADD THE TOP LIST TO THE HEADER (<ul>).

 var sub_ul = $('<ul/>')
 .appendTo(li);


$.ajax({
type: 'GET',
url: 'site_info.xml',        
dataType: 'xml',
success: function (xml) {                                 
$(xml).find('EquipmentID').each(function () {

var sub_li = $('<li/>')
.appendTo(sub_ul);

title = $(this).find('Power_Systems').text();

$('<a />')
.text(title)
.attr('href', '')
.appendTo(sub_li);
});
}
});
});
</script>

该xml文件称为site_info.xml。它包含：

<?xml version="1.0" encoding="UTF-8"?>

<site_info>
<EquipmentID>
<SiteName>1</SiteName>
<Power_Systems>Rectifier 1</Power_Systems>
<Radio_Systems>Digital Radios 1</Radio_Systems>
<Asset_Prot>Signal 1</Asset_Prot>
<Software>Radio Software1</Software>
</EquipmentID>
<EquipmentID>
<SiteName>2</SiteName>
<Power_Systems>Rectifiers 2</Power_Systems>
<Radio_Systems>Digital Radios 2</Radio_Systems>
<Asset_Prot>Signal 2</Asset_Prot>
<Software>Radio Software 2</Software>
</EquipmentID>
<EquipmentID>
<SiteName>3</SiteName>
<Power_Systems>Rectifiers 3</Power_Systems>
<Radio_Systems>Digital Radios 3</Radio_Systems>
<Asset_Prot>Signal 3</Asset_Prot>
<Software>Radio Software 3</Software>
</EquipmentID>
</site_info>

将数据从.xml文件提取到.html <ul>中。如何获得分配给每个菜单项的单独网址？

0 个答案: