我正在尝试使用左侧和右侧的欧洲地图创建一个页面,当我点击所需的国家/地区时会出现该面板.
我现在的问题是小组,因为我在创建它时遇到了麻烦.
这是没有面板的页面代码:
<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/
有什么帮助吗？
小智 5
你上面所做的看起来有点过于复杂.我已经写了一个基本的JS小提琴,用于显示和隐藏div,基于来自标签的rels查找具有特定ID的div.
http://jsfiddle.net/2Be9a/17/ - 更新了最新的小提琴