3

嗨，我主要是一名设计师，但我自己负责了解幕后发生的事情，以帮助我设计更好的网站。

这是我从头开始设计和构建的第一个网站，一切都很顺利，直到我用 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 下拉列表选择隐藏内容 ok 但在页面加载时不显示第一个 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 回答