Question

我创建了一个美国的矢量地图，并给每个州一个“#insertstatename”的链接，例如“#florida”和“#utah”。单击每个状态时，应显示包含州名称的列表。为了简化代码，我刚刚缩短了州名所显示的内容。在单击链接之前，我无法隐藏状态。

一次只能显示一个状态和列表，因此当单击一个时，它会隐藏另一个状态和列表。

这是我的HTML

<div id="florida">
<p> florida </p>
</div>

<div id="utah">
<p> utah </p>
</div>

这是我的脚本

<script>
 jQuery('.resume') .hide()
jQuery('a[href^="#"]').on('click', function(event) {
jQuery('.resume') .hide()
    var target = jQuery(this).attr('href');

    jQuery('.resume'+target).toggle();
    e.preventDefault();
});
</script>

Answer 1

您可以使用解决方案https://jsfiddle.net/w1nyzdze/

＆＃13;

$('div.resume').hide();
$('a').click(function(){
 $($(this).data('href')).slideDown().siblings('div.resume').hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-href="#florida">florida</a>
<a data-href="#utah">utah</a>
<br/>

<div class="resume" id="florida">
<p> florida </p>
</div>

<div class="resume" id="utah">
<p> utah </p>
</div>

＆＃13;

我没有在href中使用anchor，而是使用了data-href 数据属性。

将显示相应Onclick下方的anchor标记的{p> div并隐藏，请使用jQuery siblings。

希望这会对你有所帮助。

使用矢量地图隐藏和显示div id

1 个答案: