Question

我要做的是设置一个相当标准的布局 - 标题，左侧菜单和右侧主体，并保持与IE，FF和Chrome兼容！

对于我希望使用旋转式菜单的菜单 - 我在这里确定了这个，因为它看起来非常轻，工作得很好并且很容易编辑菜单项。 http://www.i-marco.nl/weblog/jquery-accordion-menu/

正如您对此布局所期望的那样，单击菜单选项将在右侧显示信息。现在有几种方法可以做到这一点，但我想要使用的选项是将html插入到＆lt; div＆gt;中。对于此菜单，它使用＆lt; a＆gt;标签 - 让他们将html加载到div标签是我的第一个问题。我有一个小代码，礼貌的朋友，我认为应该拦截＆lt; a href＆gt;然后将链接的html插入div标签。不幸的是它似乎不起作用，我希望这里有一个善良的灵魂可能会在一个菜鸟上变得很糟糕并为我带来一些亮点！：）

所以这是我在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>

简单的文本html加载到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>

Answer 1

如果没有看到hrefs中引用的html文件的任何示例，很难回答你的问题，但有些事情发生在我身上：

在这一行......

var inserting = $('body',data).html();

...看起来你的意图是从返回的数据中提取一些html，但是这种语法不对。实际上你甚至不需要存储任何东西（稍后会详细介绍）。

下面...

$('#TEST').fadeOut('fast',function(){

...一旦插入数据，你就会告诉#TEST div隐藏它。这真的是你想要的吗？

get（）函数可能无法正确解释数据类型，因此您应该明确设置它。如果您只是想将html文档的内容插入到#TEST div中，您只需执行以下操作：

$.get(href,function(data){
  $('#TEST').html(data);
}, "html");

如果仍然不适合您，请澄清问题，并在href中包含一个示例html文件。

Javascript手风琴菜单;将html从<a> tags</a> </div>插入<div>

1 个答案: