Question

我有一个页面网站结构。这是我的菜单：

我有一个菜单结构：

 <ul id="creamenu" class="menuHolder">
                        <li><a id="news-1-menu" href="#/creative-events">news 1</a></li>
                        <li><a id="news-2-menu" href="#/creative-ajans">news 2</a></li>
                        <li><a id="news-3-menu" href="#/incentive-travel">news 3</a></li>
                    </ul>
                    <ul id="mainmenu" class="menuHolder">
                        <li><a id="about1-menu" href="#/hakkimizda">about 1</a></li>
                        <li><a id="about2-menu" href="#/haberler">about 2</a></li>
                        <li><a id="about3-menu" href="#/galeri">about 3</a></li>
                        <li><a id="about4-menu" href="#/referanslar">about 4</a></li>
                        <li><a id="about5-menu" href="#/iletisim">about 5</a></li>
    </ul>

这是内容结构：

<div id='news-1'>
    <!-- content -->
    <!-- content -->

<div id='news-2'>
    <!-- content -->
    <!-- content -->

当我点击一个菜单项时，通过视差效果转到页面（我正在使用高级插件）但我的网站很慢...因为，当我点击一个菜单项时，我希望通过ajax加载内容。可能吗？我该怎么办？

Answer 1

试试这个： -

$('ul#creamenu li a').click(function () {
$.ajax({
                type: "POST",
                url: "Your Url",
                data: "{'data':'send data here if you want'}",
                dataType: "json",
                success: function (data) {
                    alert(JSON.Stringify(data));
                },
                error: function (result) {
                    alert("Error");
                }
            });

});

Answer 2

如果内容在其他文件中，则可以使用$.load(url).

$('#news-1').load('url of the content to load');

如果您将内容存储在同一页面中，则可以在单击菜单时将其显示。

$('#news-1').on('click',function(){
$('#news-1').appendTo($('#creative-events').html()); // this is the prototype, need to make a generic code
})

Answer 3

试试这个

 $('#news-1').load('ajax/page1.html');
 $('#news-2').load('ajax/page2.html');

Answer 4

我认为您正在寻找像标签式面板这样的解决方案。尝试使用jQuery隐藏和显示div。对于前者你有3个菜单作为news-1，news-2，news-3并使他们的单独内容div ex：div1，div2，div3如下...

<div id="div1" style="display:none">
some content....
</div>
<div id="div2" style="display:none">
some content....
</div>
<div id="div3" style="display:none">
some content....
</div>

在菜单的onclick事件中为ex。 news-1然后显示div1并让所有其他隐藏如下..

$("#div2").hide();
$("#div3").hide();
$("#div1").show();

然后更改其他菜单的代码..

在同一页面中加载内容ajax

4 个答案: