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>

在这部分代码中，第一个函数用于菜单，第二个函数为地图调用 JS。

我想使用 .show()，但我真的不知道如何管理它们。如果我点击西班牙没有任何反应。我认为问题出在'$（“ul.europe li a show”）'。或者也使用这样的东西：http: //jsfiddle.net/rionmonster/J8U25/

请问有什么帮助吗？

4

2 回答 2

5

你在上面做的事情看起来有点复杂。我写了一个基本的 JS fiddle，用于显示和隐藏基于 rels 从 a 标签找到具有特定 ID 的 div 的 div。

http://jsfiddle.net/2Be9a/17/ - 更新了最新的小提琴

于 2012-10-09T09:26:21.603 回答
3

show是一个 id，所以只需简单地使用$("#show")，因为 id 应该始终对文档是唯一的。

更新

我已经在这个 JSFiddle中重新创建了您的代码，并发现了我认为的问题。jQuery中没有.cssMap，它只是.css.

所以换...

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

到...

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

（你仍然需要$("#show")在适当的地方使用我在这个答案的第一部分中提到的）

如果您还没有，我强烈建议您使用Firebug for Firefox或 IE8+ 和 Chrome 中的开发人员工具，因为这样很容易发现。

于 2012-10-09T08:28:58.867 回答