3

左側にヨーロッパの地図、右側に目的の国をクリックすると表示されるパネルを含むページを作成しようとしています。

現時点で私の問題はパネルです。作成に問題があるためです。

これは、パネルのないページのコードです:

<script type="text/javascript">
$(function(){
$('#navigation li a').append('')
$('#navigation li a').append('')
$('#navigation .hover').css("filter","alpha(opacity=00)");
$('#navigation li a').hover(function() {

// Stuff that happens when you hover on + the stop()
$('.hover', this).stop().animate({
    'opacity': 1
}, 700,'easeOutSine')

},function() {

// Stuff that happens when you unhover + the stop()
$('.hover', this).stop().animate({
    'opacity': 0
}, 700, 'easeOutQuad')

})
});

$(function($){
    $('#map').cssMap({'size' : 670});
});
</script>

<body>

<div id="wrap">
    <div id="page">
        <div id="map-content">          
            <div id="map">
            <ul class="europe">
                <li class="es"><a href="#espana" id=show>Espana</a></li>
                <li class="uk"><a href="#unitedkingdom">United Kingdom</a></li>
                <li class="fr"><a href="#france">France</a></li>
            </ul>
        </div>
    </div>

    <button id=hide>hide()</button>
    <button id=reset>Reset</button>

    <p>Hello, this show() and hide() example</p>

    <script type="text/javascript">

    $("ul.europe li a show").click(function () {
       $("p").show('fast');
    });

    $("#hide").click(function () {
       $("p").hide(1000);
    });

    $("#reset").click(function(){
        location.reload();
    });
    </script>

   </div>   
</div>

コードのこの部分では、最初の関数はメニュー用で、2 番目の関数はマップ用の JS を呼び出します。

私は .show() を使用することを考えましたが、それらを管理する方法が本当にわかりません。Espana をクリックしても何も起こりません。問題は「$("ul.europe li a show")」にあると思います。または、次のようなものも使用してください: http://jsfiddle.net/rionmonster/J8U25/

何か助けてください。

4

2 に答える 2

5

上記で行っていることは、少し複雑すぎるように見えます。特定の ID を持つ div を見つけるタグからの rel に基づいて、div を表示および非表示にするための基本的な JS フィドルを作成しました。

http://jsfiddle.net/2Be9a/17/ - 最新のフィドルを更新

于 2012-10-09T09:26:21.603 に答える
3

show$("#show")はIDであるため、IDは常にドキュメントに固有である必要があるため、単に使用してください。

アップデート

このJSFiddleでコードを再作成し、問題だと思うものを発見しました。.cssMapjQueryにはありません、それはただ.cssです。

だから変更...

$('#map').cssMap({'size' : 670});

に...

$('#map').css({'size' : 670});

$("#show")（この回答の最初の部分で述べたように、適切な場所で使用する必要があります）

まだ使用していない場合は、Firefox用のFirebugやIE8 +およびChromeの開発ツールなどを使用することを強くお勧めします。そうすれば、これを簡単に見つけることができます。

于 2012-10-09T08:28:58.867 に答える