3

こんにちは、私は主にデザイナーですが、より良いウェブサイトをデザインするのに役立つように、内部で何が起こっているのかを理解することに専念しています。

これは、私がゼロから設計および構築した最初の Web サイトであり、ul li のアクティブ状態でこの問題に遭遇するまで、すべてが順調に進んでいます。

ベータ版へのリンクは次のとおりです: 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で見つけたクローゼットの記事は、この解決策でした。jquery を使用して、ネストされたコンテンツで div の可視性を変更する、onclick

私は次のことを試しましたが、まだ運がありません：

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

トグル スクリプトとセレクター スクリプトが何らかの形で競合または重複していると推測していますが、これを修正する方法がわかりません。ヘルプ/アドバイス/記事は大歓迎です。

4

1 に答える 1

2

「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
});
于 2012-10-09T16:09:13.113 に答える