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 属性には拡張機能がありません。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 では display:hidden;)。

しかし、コンテンツをロードするだけでなく、含まれている 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 に答える