我正在尝试在左侧实现一个带有链接列表的导航侧边栏（<a>）这样，单击每个链接时，对应的<div>将被加载到右侧。
<a>
<div>
当我有一个函数onclick财产在<a>。它在浏览器控制台上给我错误。
onclick
未捕获的引用错误：callFunction 未定义
这是我的实现：
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ function callFunction(){alert("Load divs");} }); </script> <style> div.container { width: 100%; border: 1px solid gray; } header, footer { padding: 1em; color: white; background-color: powderblue; clear: left; text-align: center; } nav { float: left; max-width: 160px; margin: 0; padding: 1em; } nav ul { list-style-type: none; padding: 0; } nav ul a { text-decoration: none; } article { margin-left: 170px; border-left: 1px solid gray; padding: 1em; overflow: hidden; } </style> </head> <body> <div class="container"> <header> <h1>My Company</h1> </header> <nav> <ul> <li><a href="#" onclick="callFunction()">Link1</a></li> <li><a href="#" onclick="callFunction()">Link2</a></li> <li><a href="#" onclick="callFunction()">Link3</a></li> </ul> </nav> <!--<div id="Link1" class="class1"> <h1>Link1</h1> <p>Link1 detail</p> </div> <div id="Link2" class="class1"> <h1>Link2</h1> <p>Link2 detail</p> </div>--> <footer>Copyright © myCompany</footer> </div> </body> </html>
我的要求是有一个链接和 s 的列表，其中 s 应隐藏，并且仅在单击相应的链接时才出现。
这是应该适合您的代码。
<div>s 最初不渲染/显示。
单击链接（<a>）， 相应的<div>显示 s
导航侧栏得以保留。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> function loadContent(selector){ $("#loadOnClick").html($(selector).html()); }; $(document).ready(function(){ loadContent("#userGuide"); }); </script> <style> div.container11 { width: 100%; } section.container1{ display: -webkit-flex; /* Safari */ display: flex; } .displayInline{ -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ flex: auto; } header, footer { padding: 1em; color: white; background-color: powderblue; clear: left; text-align: center; } nav { border-right: 2px solid gray; } nav ul { list-style-type: none; padding-top: 5px; } nav ul a { text-decoration: none; line-height: 30px; } div#loadOnClick { float: right; } .displayOnClick{ display: none; } </style> </head> <body> <div class="container"> <header> <h1>My Company</h1> </header> <section id="container1"> <nav class="displayInLine" style="width: 20%; float: left;"> <ul> <li><a href="#userGuide" class="quickLinks" onclick='loadContent("#userGuide")'>User Guide</a></li> <li><a href="#SOP" class="quickLinks" onclick='loadContent("#SOP")'>SOP</a></li> <li><a href="#procedurePages" class="quickLinks" onclick='loadContent("#procedurePages")'>Procedure pages</a></li> <li><a href="#departmentInformation" class="quickLinks" onclick='loadContent("#departmentInformation")'>Department information</a></li> <li><a href="#hoursOfOperations" class="quickLinks" onclick='loadContent("#hoursOfOperations")'>Hours of operations</a></li> </ul> </nav> <div class="displayInLine" id="loadOnClick" style="width:75%; float: right;"> </div> </section> <div id="userGuide" class="displayOnClick"> <h1>User Guide</h1> <p>This is the userguide for employees</p> </div> <div id="SOP" class="displayOnClick"> <h1>SOP</h1> <p>This is the Statement of purpose for employees</p> </div> <div id="procedurePages" class="displayOnClick"> <h1>Procedure pages</h1> <p>This is the Procedure pages for employees</p> </div> <div id="departmentInformation" class="displayOnClick"> <h1>Department information</h1> <p>This is the Department information for employees</p> </div> <div id="hoursOfOperations" class="displayOnClick"> <h1>Hours of operations</h1> <p>This is the Hours of operations for employees</p> </div> <footer>Copyright © Om Sao</footer> </div> </body> </html>
