0

大家好！

我知道这已经解决了几次，但是在查看其他问题后，我似乎无法正确解决这个问题。所以这里。

我已经把这个不带点的列表变成了一个包含 7 个项目的菜单。

    <ul id="om-ropox-menu">
        <li class="undotted"><a href="1">1</a></li>
        <li class="undotted"><a href="2">2</a></li>
        <li class="undotted"><a href="3">3</a></li>
        <li class="undotted"><a href="4">4</a></li>
        <li class="undotted"><a href="5">5</a></li>
        <li class="undotted"><a href="6">6</a></li>
        <li class="undotted"><a href="7">7</a></li>      
    </ul>

href attr 没有扩展，因为我需要这种方式，我会让 javascript 处理它。因此，每当用户单击其中一个链接时，我都会拥有此 javascript 代码

    //on page load, get this file
$(document).ready(function(){
    $('#about_content').load('subpages/content_about/con_1.php');
    $('#about_content').fadeIn(1000);

    //handle menu clicks
    $('ul#om-ropox-menu li a').click(function(){
          var page = $(this).attr('href');
          $('#about_content').load('subpages/content_about/con_'+page+'.php', function(){
         });
     return false;
    });
});

这会从外部 php 文件加载内容，当用户单击 7 个链接之一时显示。（con_1.php，con_2.php...con_7.php）。

请注意，div 有一个隐藏它的类（显示：隐藏；在 CSS 中）。

但不仅仅是加载内容，我希望包含的 div 通过 jQuery 淡入和折叠，那么我在这里缺少什么？

奖励任务（不能在标题中使用问题，哈哈） 我可以修改 javascript 以获取，假设用户第一次到达页面时获取变量。假设我会让他们通过来自其他地方的 href 链接“向右跳”到 #4？

干杯!

编辑

我让它与fadeIn函数一起工作，所以现在加载时内容很好地淡入淡出。这就是我所拥有的。

    //on page load, get this file
$(document).ready(function(){
    $('#about_content').load('subpages/content_about/con_om.php', function(){
        $(this).fadeIn(1000)
        });

    //handle menu clicks
    $('ul#om-ropox-menu li a').click(function(){
        var page = $(this).attr('href');
        $('#about_content').fadeOut(1000, function() {
             $(this).load('subpages/content_about/con_'+page+'.php', function() {
             $(this).foldd(1000);
         });
         })
        return false;
    });
});
4

1 回答 1

0

尝试更多类似的东西：

<ul id="om-ropox-menu">
    <li class="undotted"><a href="#1">1</a></li>
    <li class="undotted"><a href="#2">2</a></li>
    <li class="undotted"><a href="#3">3</a></li>
    <li class="undotted"><a href="#4">4</a></li>
    <li class="undotted"><a href="#5">5</a></li>
    <li class="undotted"><a href="#6">6</a></li>
    <li class="undotted"><a href="#7">7</a></li>      
</ul>​

js：

$(document).ready(function() {
    var page = document.location.hash.substring(1) || '1';
    $('#about_content').load('subpages/content_about/con_'+page+'.php', function() {
        $(this).fadeIn(1000);
    });

    $('#om-ropox-menu li a').on('click', function(e) {
        e.preventDefault();
        page = $(this).attr('href').substring(1);
        $('#about_content').fadeOut(1000, function() {
            $(this).load('subpages/content_about/con_'+page+'.php', function() {
                $(this).fadeIn(1000);
            });
        })
    });
});​
于 2012-08-16T21:30:53.043 回答