如何使用JSON结构创建HTML导航
虽然我使用Javascript / CSS创建了基本的HTML导航，但我需要使用JSON结构创建以下导航;
所以导航应该看起来像;
JSON结构如下;
{
"general":{
"logo":"assets/images/logo.png",
"name" : "Company Name"
},
"navigation":[
{
"title":"Home",
"link":"index.html"
},
{
"title":"Products",
"link":"product.html",
"subnav":[
{
"title":"Webapps",
"link":"products/webapps.html"
},
{
"title":"Mobile Apps",
"link":"products/mobile-apps.html"
}
]
}
]
}
如何使用JSON结构创建HTML;
导航包含多级导航的数据。占位符将定义导航显示的位置，因此它也可以出现在多个位置。 DOM也应该使用JS创建，JS应该不引人注目。
请帮帮我。我不是在看实际的代码，但链接到类似的示例以供参考将非常有用......我只需要步骤/提示来实现它。
谢谢。
示例HTML：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=unicode">
<meta name="Generator" content="Microsoft Word 15 (filtered)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:"Segoe UI";
panose-1:2 11 5 2 4 2 4 2 2 3;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman",serif;}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
p
{margin:0in;
margin-bottom:.0001pt;
font-size:10.5pt;
font-family:"Arial",sans-serif;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman",serif;}
p.msonormal0, li.msonormal0, div.msonormal0
{mso-style-name:msonormal;
margin:0in;
margin-bottom:.0001pt;
font-size:10.5pt;
font-family:"Arial",sans-serif;}
p.msolistparagraphcxspfirst, li.msolistparagraphcxspfirst, div.msolistparagraphcxspfirst
{mso-style-name:msolistparagraphcxspfirst;
margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman",serif;}
p.msolistparagraphcxspmiddle, li.msolistparagraphcxspmiddle, div.msolistparagraphcxspmiddle
{mso-style-name:msolistparagraphcxspmiddle;
margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman",serif;}
p.msolistparagraphcxsplast, li.msolistparagraphcxsplast, div.msolistparagraphcxsplast
{mso-style-name:msolistparagraphcxsplast;
margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman",serif;}
p.msochpdefault, li.msochpdefault, div.msochpdefault
{mso-style-name:msochpdefault;
margin:0in;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Arial",sans-serif;}
.MsoChpDefault
{font-size:10.0pt;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 0in 1.0in;}
div.WordSection1
{page:WordSection1;}
-->
</style>
</head>
<body lang="EN-US" link="blue" vlink="purple">
<div class="WordSection1" style="page: WordSection1;">
<div align="center">
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;background:white;border-collapse:collapse">
<tr>
<td width="100%" valign="top" style="width:100.0%;padding:0in 0in 0in 0in">
<div align="center">
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;border-collapse:collapse">
<tr>
<td width="100%" style="width:100.0%;padding:0in 0in 0in 0in">
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;border-collapse:collapse">
<tr>
<td style="background:#E7E6E6;padding:0in 0in 0in 0in">
<div align="center">
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse">
<tr>
<td width="608" style="width:456.05pt;padding:.75pt .75pt .75pt .75pt">
<div align="center">
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="606" style="width:454.55pt;border-collapse:collapse">
<tr style="height:472.5pt">
<td width="100%" style="width:100.0%;background:white;padding:0in 0in 0in 0in;
height:472.5pt">
<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="606" style="width:454.55pt;border-collapse:collapse">
<tr style="display:none;height:91.8pt">
<td width="606" style="width:454.55pt;padding:0in 0in 0in 0in;
height:91.8pt">
<p style="margin-top: 0in;margin-right: 12.45pt;margin-bottom: .0001pt;margin-left: 10.25pt;margin: 0in;font-size: 10.5pt;font-family: "Arial",sans-serif;"><span style="font-size:
10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838;display:
none">Corporate Account Request<u7:p></u7:p></span><span style="display:none"><u8:p></u8:p><u9:p></u9:p><u10:p></u10:p><u11:p></u11:p><u12:p></u12:p><u13:p></u13:p><u14:p></u14:p><u15:p></u15:p><u16:p></u16:p></span></p>
</td>
</tr>
<tr style="height:17.65pt">
<td width="606" valign="top" style="width:454.55pt;background:#222B33;
padding:25.5pt 0in 25.5pt 0in;height:17.65pt">
<p class="MsoNormal" align="center" style="margin-top: 0in;margin-right: 16.95pt;margin-bottom: .0001pt;margin-left: 46.25pt;text-align: center;text-indent: -31.5pt;font-size: 12.0pt;font-family: "Times New Roman",serif;"><u7:p><span style="font-size:16.0pt;font-family:"Segoe UI",sans-serif;
color:#E7E6E6"><img width="161" height="36" src="https://marketing-image-production.s3.amazonaws.com/uploads/9e9ac490a745058ed56bbe763644cd76fc608a7dc85d61c0d29a580e7bdd34588ed8b2aea42c524a856597cf5460a1c05dd3abf14743e75be743ef7dc8c4425e.png" alt="Bittrex Logo"></span></u7:p></p>
</td>
</tr>
</table>
<p class="MsoNormal" align="center" style="margin-top: 0in;margin-right: 16.95pt;margin-bottom: .0001pt;margin-left: 46.25pt;text-align: center;text-indent: -31.5pt;margin: 0in;font-size: 12.0pt;font-family: "Times New Roman",serif;"><span style="font-size:16.0pt;
font-family:"Segoe UI",sans-serif;color:#3B3838"><u7:p><u12:p> </u12:p></u7:p></span></p>
<u15:p></u15:p>
<p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center; margin-bottom: .0001pt;font-size: 12.0pt;font-family: "Times New Roman",serif;"><span style="font-size:16.0pt;font-family:"Segoe UI",sans-serif;
color:#3B3838"><u10:p></u10:p>Existing Bittrex Customer Fiat (USD)
Trading</span></p>
<u15:p></u15:p>
<p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center; margin-bottom: .0001pt;font-size: 12.0pt;font-family: "Times New Roman",serif;"><span style="font-size:16.0pt;font-family:"Segoe UI",sans-serif;
color:#3B3838">Request Received<u10:p></u10:p></span><u17:p></u17:p></p>
<p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center;margin: 0in;margin-bottom: .0001pt;font-size: 12.0pt;font-family: "Times New Roman",serif;"><span style="font-family:"Segoe UI",sans-serif"> </span></p>
<u15:p></u15:p>
<!-- START SECTION 1 -->
<p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: "Times New Roman",serif;"><span style="font-size:10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"> <b>Thank
You For Your US Dollar Trading Request</b></span></p>
<u15:p></u15:p>
<p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"> </span></p>
<div>
<div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
<b>-</b>
</div>
<div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
Bittrex support will respond to your request within 7 business days
</div>
</div>
<div style="clear: both"></div>
<div>
<div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
<b>-</b>
</div>
<div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
USD trading is now available for both <b>personal and corporate accounts</b>
</div>
</div>
<div style="clear: both"></div>
<div>
<div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
<b>-</b>
</div>
<div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
Only customers with operating location <b>outside the United States</b> or inside the United States in <b>CA, WA, NY, or MT</b> currently qualify for USD trading. We cannot approve accounts located in any other US state at this time but we will add more states soon.
</div>
</div>
<div style="clear: both"></div>
<div>
<div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
<b>-</b>
</div>
<div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
You will receive email confirmation upon approval with more information. If you requested USD deposits and withdrawals in addition to USD trading, your confirmation email <b>will include wire transfer instructions</b>
</div>
</div>
<div style="clear: both"></div>
<div>
<div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
<b>-</b>
</div>
<div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
If you are only adding a whitelisted bank account, you will receive confirmation when that bank account has been added to your account
</div>
</div>
<div style="clear: both"></div>
<div>
<div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
<b>-</b>
</div>
<div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
Follow Bittrex on Twitter for new market announcements (crypto
and USD) as well as new US states that qualify for fiat (US Dollar)
trading: <a href="https://twitter.com/BittrexExchange">https://twitter.com/BittrexExchange</a>
</div>
</div>
<div style="clear: both"></div>
<!-- END SECTION 1 -->
<!-- START SECTION 2 -->
<p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"> </span><u17:p></u17:p></p>
<p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: "Times New Roman",serif;"><span style="font-size:10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"> <b>API Integration Updates</b></span></p>
<p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"><u10:p> </u10:p></span><u17:p></u17:p></p>
<div>
<div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
<b>-</b>
</div>
<div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
Please note that we have updated our API with the release of our new site
</div>
</div>
<div style="clear: both"></div>
<div>
<div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
<b>-</b>
</div>
<div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
For those accessing Bittrex via API, visit </span><span
style='color:blue'><a href="https://bittrex.github.io/">https://bittrex.github.io/</a></span><span
style='color:#3B3838'> for recent updates regarding our Websocket.
Please bookmark, as future API (REST and Websocket) documentation and
best practices will be posted to that site.
</div>
</div>
<div style="clear: both"></div>
<div>
<div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
<b>-</b>
</div>
<div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
If you are not already a member of our #api-developers Slack channel,
please search for that channel in our Slack or email </span><span
style='color:blue'><a href="mailto:corpcare@bittrex.com">corpcare@bittrex.com</a></span><span
style='color:#3B3838'> to receive an invitation to the Bittrex Slack
(if you are not already a member). Corporate accounts and high volume
personal accounts can receive an invitation. Our developer community
is growing as we actively improve the API experience.
</div>
</div>
<div style="clear: both"></div>
<!-- END SECTION 2 -->
<!-- START SECTION 3 -->
<p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"> </span><u17:p></u17:p></p>
<p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: "Times New Roman",serif;"><span style="font-size:10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"> <b>Future Support Requests</b></span></p>
<p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"><u10:p> </u10:p></span><u17:p></u17:p></p>
<div>
<div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
<b>-</b>
</div>
<div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
<b>Submit a support requests and view support articles and blog here:</b>
<a href="https://support.bittrex.com/"><u11:p></u11:p><u18:p></u18:p>https://support.bittrex.com/</a>
</div>
</div>
<div style="clear: both"></div>
<div>
<div style="float: left; width: 2%; margin-left: 5%; font-size: 1em">
<b>-</b>
</div>
<div style='float: left; width: 89%; margin-left: 1%; font-size: 0.8335em; font-family:"Segoe UI",sans-serif;color:#3B3838'>
<b>Sign in to support.bittrex.com and click on "my activities" to reference this ticket</b>
<a href="https://support.bittrex.com/hc/en-us/signin">https://support.bittrex.com/hc/en-us/signin</a>
</div>
</div>
<div style="clear: both"></div>
<!-- END SECTION 3 -->
<!-- START SECTION 4 -->
<p class="MsoNormal" align="center" style="margin-right: .2in;text-align: center;margin: 0in;margin-bottom: .0001pt;font-size: 12.0pt;font-family: "Times New Roman",serif;"><span style="font-family:"Segoe UI",sans-serif"> </span></p>
<u15:p></u15:p>
<p class="MsoNormal" style="margin-top: 0in;margin-right: .2in;margin-bottom: .0001pt;margin-left: 7.55pt;font-size: 12.0pt;font-family: "Times New Roman",serif;"><span style="font-size:10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"> <b>Thank you and
Happy Trading!</b></span></p>
<p class="MsoNormal" style="margin-right:.2in"><span style="font-size:
10.0pt;font-family:"Segoe UI",sans-serif;color:#3B3838"><u10:p> </u10:p></span><u17:p></u17:p></p>
<!-- END SECTION 4 -->
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<p class="MsoNormal" style="margin: 0in;margin-bottom: .0001pt;font-size: 12.0pt;font-family: "Times New Roman",serif;"><span style="font-size:10.0pt;font-family:"Segoe UI",sans-serif"><u7:p> </u7:p></span><u12:p></u12:p><u14:p></u14:p><u15:p></u15:p><u16:p></u16:p></p>
<u13:p></u13:p></div>
<u10:p></u10:p>
</body>
</html>
2 个答案:
答案 0 :(得分：3)
只是尝试一些新的东西，这就是我用Handlebars.js这个JavaScript模板语言的方法：
<nav id="nav"></nav>
<script id="nav-template" type="text/x-handlebars-template">
<ul class="nav">
{{#each navigation}}
<li><a href="{{ link }}">{{ title }}</a></li>
{{#if subnav}}
<ul class="subnav">
{{#each subnav}}
<li><a href="{{ link }}">{{ title }}</a></li>
{{/each}}
</ul>
{{/if}}
{{/each}}
</ul>
</script>
你的JavaScript：
var template = Handlebars.compile($("#nav-template").html());
$('#nav').html(template(data));
答案 1 :(得分：0)
您可以参考以下网址，它会对您有所帮助 http://www.jqwidgets.com/building-menu-from-json/
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？