-1

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

我有一个菜单结构：

 <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 加载内容。是否可以？我该怎么做？

4

4 回答 4

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");
                }
            });

});
于 2013-01-22T12:00:50.777 回答
0

如果内容在其他文件中，那么您可以使用$.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
})
于 2013-01-22T11:58:51.367 回答
0

试试这个

 $('#news-1').load('ajax/page1.html');
 $('#news-2').load('ajax/page2.html');
于 2013-01-22T12:00:11.933 回答
0

我认为您正在寻找像选项卡式面板这样的解决方案。尝试使用 jQuery 隐藏和显示 div。例如。你有 3 个菜单，分别为 news-1、news-2、news-3，并使其单独的内容 div 例如：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 事件中，例如。news-1 然后显示 div1 并让所有其他隐藏如下..

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

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

于 2013-01-22T12:59:28.340 回答