Javascript 手风琴菜单；将 html 插入中从 标签
我想做的是设置一个相当标准的布局 - 标题、左侧菜单和右侧主体，并使其与 IE、FF 和 Chrome 兼容！
对于菜单，我希望使用手风琴式菜单 - 我在这里选择了这个，因为它看起来重量很轻，工作得很好并且很容易编辑菜单项。 http://www.i-marco.nl/weblog/jquery-accordion- menu/
正如您对该布局所期望的那样，单击菜单选项将在右侧显示信息。 现在有几种方法可以做到这一点，但我想使用的选项是将 html 插入到
的非常基本的代码
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function(){
var checkElement = $(this).next(),
href = $(this).attr('href');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
if (href != '#') {
$.get(href,function(data){
var inserting = $('body',data).html();
$('#TEST').fadeOut('fast',function(){
$(this).html(inserting);
});
});
return false;
}
});
}
$(document).ready(function() {initMenu();});
/* ]]> */
</script>
<ul id="menu">
<li>
<a href="#">Weblog Tools</a>
<ul>
<li><a href="text.html">Simple Text</a></li>
<li><a href="s2000.html">S2000 Info</a></li>
<li><a href="local_link.html">Typo</a></li>
</ul>
</li>
<li>
<a href="#">Programming Languages</a>
<ul>
<li><a href="local_link.html">PHP</a></li>
<li><a href="html/text.html">Ruby</a></li>
<li><a href="local_link.html">Python</a></li>
<li><a href="local_link.html">PERL</a></li>
</ul>
</li>
</ul>
<div id="TEST">
Content should replace this text.
</div>
所以这是我在 index.html简单文本 html 中加载到 div 中 文本.html
<html>
<body>
<p><h1>simple text</h1></p>
<p>Lorem ipsum dolor sit amet, vim ut diam nulla admodum.</p>
<p>Eum eu odio movet, nusquam deleniti ut his, usu te eius tamquam.</p>
<p>blah
<br />
de-blah
<br />
...
</p>
</body>
</html>
What I'm trying to do is setup a fairly standard sort of layout - header, menu on left and main body on the right and keep it compatible with IE, FF and Chrome!
For the menu I wish to use an acordion style menu - I settled on this one here as it seemed very light weight, worked nicely and is very easy to edit menu items.
http://www.i-marco.nl/weblog/jquery-accordion-menu/
As you would expect from this layout clicking a menu option will have the information display on the right.
Now there are a few ways I could probably do this, but the option I want to use is inserting html in to a <div>.
For this menu it uses <a> tags - getting them to load a html in to a div tag is my first problem here. I have a little code, courtesy of a friend, that I believe should intercept the <a href>'s and then insert the linked html into the div tag.
Unfortunately it doesn't seem to work and I was hopeing a kind soul here might take pitty on a noob and shed some light for me! :)
So here is the very basic code I would have in my index.html
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function(){
var checkElement = $(this).next(),
href = $(this).attr('href');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
if (href != '#') {
$.get(href,function(data){
var inserting = $('body',data).html();
$('#TEST').fadeOut('fast',function(){
$(this).html(inserting);
});
});
return false;
}
});
}
$(document).ready(function() {initMenu();});
/* ]]> */
</script>
<ul id="menu">
<li>
<a href="#">Weblog Tools</a>
<ul>
<li><a href="text.html">Simple Text</a></li>
<li><a href="s2000.html">S2000 Info</a></li>
<li><a href="local_link.html">Typo</a></li>
</ul>
</li>
<li>
<a href="#">Programming Languages</a>
<ul>
<li><a href="local_link.html">PHP</a></li>
<li><a href="html/text.html">Ruby</a></li>
<li><a href="local_link.html">Python</a></li>
<li><a href="local_link.html">PERL</a></li>
</ul>
</li>
</ul>
<div id="TEST">
Content should replace this text.
</div>
simple text html to load into div
text.html
<html>
<body>
<p><h1>simple text</h1></p>
<p>Lorem ipsum dolor sit amet, vim ut diam nulla admodum.</p>
<p>Eum eu odio movet, nusquam deleniti ut his, usu te eius tamquam.</p>
<p>blah
<br />
de-blah
<br />
...
</p>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果没有看到您的 href 中引用的 html 文件的任何示例，很难回答您的问题，但我想到了一些事情：
在这一行中......
...看起来您的意图是从返回的数据中提取一些 html ，但该语法不正确。实际上，您甚至不需要存储任何内容（稍后会详细介绍）。
在这里...
...您告诉 #TEST div 在插入数据后隐藏。这真的是你想要的吗？
get() 函数可能无法正确解释数据类型，因此您应该显式设置它。如果您只是尝试将 html 文档的内容插入到 #TEST div 中，您所要做的就是以下操作：
如果这仍然不适合您，请澄清问题，并包含引用的示例 html 文件在你的hrefs中。
It's hard to answer your question without seeing any examples of the html files referenced in your hrefs, but a few things occur to me:
In this line...
... it looks like your intention is to extract some html from the returned data, but that syntax isn't right. You actually don't even need to store anything (more on that later).
Here...
... you're telling the #TEST div to hide once its data is inserted. Is that really what you want?
It's possible that the get() function isn't correctly interpreting the datatype, so you should explicitly set it. If you're just trying to insert the contents of an html document into the #TEST div, all you have to do is the following:
If that still doesn't work for you, clarify the problem, and include a sample html file referenced in your hrefs.