0

私は JQuery を初めて使用します。JScript の代わりに JQuery を使用して次のことを達成する方法について何か考えがあるかどうか知りたいです。

トップ div 内に a のグループがあります。

<h3>
<a id="acer" href="#acerca">acerca</a> |
<a id="cur" href="#cursos">cursos y clases</a> |
<a id="cal" href="#calendario">calendario</a> |
<a id="con" href="#contacto">contacto</a>
</h3>

その下の同じコンテナー div 内には、4 つのコンテンツ div が順番にあり、それぞれが上記の各 a に属しています。

<div id="acerca"></div>
<div id="cursos"></div>
<div id="calendario"></div>
<div id="contacto"></div>

さて、ここでの考え方は、これらのコンテンツ div をすべて閉じることから始めますが、最初の acerca はユーザーに表示されます。

$(document).ready(function(){

    $("#cursos,#calendario,#contacto").hide();

});

ここで、上部にある h3 a を使用して、次の動作を実行します。

1.- デフォルトで開いているアイテム (acerca) とは別のアイテムをクリックすると、現在開いているアイテムを閉じて、新しいアイテムが表示されます。2.- 既に開いている同じアイテム (acerca) をクリックしても、何も起こりません。常に 1 つのコンテンツ div が開いている必要があります。3.- 可能であれば、#anchors を使用して醜い「javascript:;」をマスクします。昔の。

これは、JavaScript の onclick 関数 (#3 を保存) を使用すると非常に簡単ですが、どうにかして JQuery に行き詰まっています。

ヘルプは大歓迎です

4

6 に答える 6

0

tvanfossonのアイデアのわずかに異なるバリエーション。

$('a').click(
    function()
    {
        var selected = $(this).attr('href');
        //If user clicked on a link which is already displayed, do nothing.
        if($(selected).hasClass('selected'))
            return;

        //hide all the divs.
        $('div.interface')
            .hide()
            .removeClass('selected');

        //show the selected div.
        $(selected)
            .show()
            .addClass('selected');
   }
}
于 2009-07-22T15:39:53.077 に答える
0

みんな素晴らしい答えです！

divを切り替えながらアニメーションを取得するためにいくつかの調整を行いました...スライド効果を使用しましたが、どの種類のアニメーションでも機能するはずです。

$('a').click( function() {
    var all = $('div.interfase');
    var selected = $(this).attr('href');
    if($(selected).hasClass('selected') || $(selected).is(":visible"))
        return false;
    else
    {
        all.removeClass('selected');
        $(selected).addClass('selected');
        $('div.interfase:visible').filter(':not(.selected)').hide('slide',
        function() {
        all.filter('.selected').show('slide');
        });
        return false;
    }
});

注:このコードは、以前に選択して表示されている div がある場合にのみ機能します。これは、内部でコールバック関数hide()を使用して効果を有効にしshow()、スムーズに処理するためです...

于 2009-09-09T00:02:15.870 に答える
0

あなたの提案からいくつかのインスピレーションを得た後、私はこれを思いつきました：

$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca").hide();
        $("#cursos").hide();
        $("#calendario").hide();
        $("#contacto").hide();
        $(checker).show();

        return false;


            }
   });

この場合：

1.-他のdivの「ターゲティング」をどのように自動化して、個別に名前を付けないようにしますか? 配列？

とにかくありがとう、私はそれを続けます。

于 2009-07-23T14:35:01.090 に答える
0

「アンカーメニュー」自体に追加の機能/タッチを追加するところまで行きました。全体は、JQuery に関しては次のようになります。=) の例で使用されているばかげた変数名は気にしないでください。

$(document).ready(function(){

$("#cursos,#calendario,#contacto").hide();
$("#ace").addClass('check');


$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');
        var anchorer = $(this);

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca,#cursos,#calendario,#contacto").hide();
        $(checker).show();
        $("#ace,#cur,#cal,#con").removeClass('check');
        $(anchorer).addClass('check');

        return false;  // 


            }
   });


});
于 2009-07-23T15:50:21.827 に答える
0

最も簡単な解決策は、メニューのすべての要素のイベントを手動で追加してから、show hidde と同じ効果を追加できる「トグル」で非表示または表示することです。

$("#acer").click(function() { $("#acerca").toggle();} );
$("#cur").click(function() { $("#cursos").toggle();} );
...

別の解決策として、この場合、jquery コードを変更せずにメニュー項目を追加できます。アンカー テキストは div id でなければなりません。

<a href="#acerca" class="anchorClass">acercade</a>
<div id="acercade"></div>

    $(".anchorClass").click(function(){ 
            $("#"+$(this).text()).toggle(); 
    });
于 2009-07-22T14:34:52.353 に答える