Question

我有一个带链接的简单地图，点击后，内容会淡入并替换另一个。

问题：第一次访问时隐藏了每个内容，我怎么能告诉jquery必须显示第一个内容块“map_overview”，而其他内容在被相关链接点击之前是隐藏的。

代码HTML：

<div id="suburbanmap"> 

<div id="stmap">
<a class="stmaplink stmap-overview" id="show_overview">Overview</a>
<a class="stmaplink stmap-content1" id="show_content1">Link to content 1</a>
<a class="stmaplink stmap-content2" id="show_content2">Link to content 2</a>
<a class="stmaplink stmap-content3" id="show_content3">Link to content 3</a>
</div>   

<div id="mapcontent"> 

<div id="map_overview" class="stmc stmc-overview">
<h3>Overview</h3>
Example Text of the the overview introduction. This content is the first which will be shown and has to be displayed while the rest is hidden.
</div>     

<div id="map_content1" class="stmc stmc-content1">
<h3>Content 1</h3>
</div>

<div id="map_content2" class="stmc stmc-content2">
<h3>Content 2</h3>
</div>

<div id="map_content3" class="stmc stmc-content3">
<h3>Content 3</h3>
</div>

</div>
</div>

代码CSS：

#mapcontent .stmc { display: none; width: 550px; float: left; }

Code Jquery：

$("#stmap a").click(function(){
      var id =  $(this).attr('id');
      id = id.split('_');
       $("#mapcontent .stmc").fadeOut(500).hide(); 
      $("#mapcontent #map_"+id[1]).fadeIn(500).show();
      var maplinks = $("#stmap a");
    maplinks.click(function () {
        maplinks.removeClass('active');
        $(this).addClass('active');
    });
   });

jquery建立在stackoverflow上并进行了修改。也许有人有解决方案？

Answer 1

告诉它在文档加载时触发click事件。

$(document).ready(function() {
    $('#map_overview').click();
});

或者只是通过设置内联样式或使用jQuery将显示设置为特定div的块：

<div id="map_overview" class="stmc stmc-overview" style="display:block">

或

$(document).ready(function() {
    $('#map_overview').css('display', 'block');
});

淡出内容但显示第一个jquery

1 个答案: