首先李不顯示活動內容

Question

嗨，我主要是一個設計師，但採取它在自己瞭解發生的事情引擎蓋下幫我設計出更好的網站。

這是第一個網站，我已經設計並從頭開始建立，所有被順利，直到我打這個問題有UL裏的活動狀態。

下面是測試版的鏈接：http://www.philmckeith.com/stonebridge/2012/4-bedroom-house-the-york-bingley.html。

與下拉的框是嵌套內容目前。

HTML：

<div id="dd" class="wrapper-dropdown-2" tabindex="1"> 
<span>House Types</span> 
<ul class="dropdown"> 
    <li id="dd1"><a href="javascript:void(0);">Chester</a></li> 
    <li id="dd2"><a href="javascript:void(0);">Durham</a></li> 
    <li id="dd3"><a href="javascript:void(0);">York</a></li> 
    <li id="dd4"><a href="javascript:void(0);">Westminister</a></li> 
    <li id="dd5"><a href="javascript:void(0);">Ripon</a></li> 
</ul> 
</div> 

<div id="content1" class="content"><img src="images/new-homes-bingley-chester-plan.png"></div> 
<div id="content2" class="content"><img src="images/new-homes-bingley-durham-plan.png"></div> 
<div id="content3" class="content"><img src="images/new-homes-bingley-york-plan.png"></div> 
<div id="content4" class="content"><img src="images/new-homes-bingley-westminister-plan.png"</div> 
<div id="content5" class="content"><img src="images/new-homes-bingley-ripon-plan.png"></div> 

的Javascript選擇：

$(document).ready(function() { 
//Active first link 
//var activeId = $(".active").attr("id").replace("dd",""); $("#content" + activeId).show(); 
$("#dd a").click(function() { 

    //reset 
$(".content").hide(); //Hide all content 
    $("ul.dropdown li:first").addClass("active").show(); //Activate first tab 
    $(".content:first").show(); //Show first tab content 
    $("#dd .active").removeClass("active"); 

    //act 
    $(this).addClass("active") 
    var id = $(this).closest("li").attr("id").replace("dd",""); 
    $("#content" + id).show(); 
}); 
}); 

的Javascript切換：

function DropDown(el) { 
      this.dd = el; 
      this.initEvents(); 
     } 
     DropDown.prototype = { 
      initEvents : function() { 
       var obj = this; 

       obj.dd.on('click', function(event){ 
        $(this).toggleClass('active'); 
        event.stopPropagation(); 
       }); 
      } 
     } 

     $(function() { 

      var dd = new DropDown($('#dd')); 

      $(document).click(function() { 
       // all dropdowns 
       $('.wrapper-dropdown-2').removeClass('active'); 

}); 
}); 

的風格UL下拉菜單中選擇隱藏的內容確定，但不顯示第一Li含量在頁面加載。我在stackoverflow上找到的壁櫥文章就是這個解決方案。 using jquery to change visibility of divs with nested content, onclick

我曾嘗試以下，但沒有運氣作爲尚未：

$('li').eq(0).addClass("active"); 

我猜我切換腳本和選擇劇本是相互矛盾或重複莫名其妙，但不確定如何解決這個問題。任何幫助/建議/文章非常感謝。

Answer 1

嘗試改變「JavaScript的選擇」這樣的：

（

$(document).ready(function() { 
    $("#dd a").click(function() { 
     //reset 
     $(".content").hide(); //Hide all content 
     $("ul.dropdown li:first").addClass("active").show(); //Activate first tab 
     $(".content:first").show(); //Show first tab content 
     $("#dd .active").removeClass("active"); 

     //act 
     $(this).addClass("active") 
     var id = $(this).closest("li").attr("id").replace("dd",""); 
     $("#content" + id).show(); 
    }); 
    $("#dd1 a").click();   // selects the first house type 
});