2014-01-06 18 views
0

我有一個簡單的地圖與鏈接,點擊後,內容淡入和替換其他。淡入淡出的內容,但先顯示jquery

問題:在第一次訪問時,每個內容都被隱藏起來,我如何告訴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; } 

代碼的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是建立在計算器和修改。也許有人有解決方案?

+0

'$(「#stmap a」)。first()。triggerHandler('click')' –

回答

0

告訴它在文檔加載時觸發點擊事件。

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

或者只是將顯示器設置爲阻止該特定DIV,通過設置內嵌樣式或使用jQuery:添加點擊處理程序只需調用後

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

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

非常感謝:) – user3165862

+0

@ user3165862記得接受和upvote的答案,如果它幫助! –