Question

我正在尝试使用欧洲地图创建一个页面，左侧和右侧是我点击所需国家/地区时显示的面板。

目前我的问题是小组，因为我在创建它时遇到了麻烦。

这是没有面板的页面代码：

<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/

请帮忙吗？

Answer 1

你上面所做的看起来有点过于复杂。我已经写了一个基本的JS小提琴，用于显示和隐藏div，它基于来自查找具有特定ID的div的标签的rel。

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

Answer 2

show是一个ID，因此只需使用$("#show")，因为ID应始终对文档唯一。

<强>更新

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

所以改变......

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

要...

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

（您仍然需要使用我在本答案第一部分中提到的$("#show")在适当的位置）

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

jQuery show（）面板无法正常工作

2 个答案: