Question

您好我主要是一名设计师，但我已经自己去理解幕后发生的事情，以帮助我设计出更好的网站。

这是我从头开始设计和构建的第一个网站，一切顺利，直到我用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上找到的壁橱文章是这个解决方案。 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
});

第一个li没有显示活动内容

1 个答案: