页面加载时，默认为在第一个链接悬停时显示文本

Question

我在ul中有一家汽车画廊，当您将鼠标悬停在每辆li（汽车）上时，下面会显示一个列表。 我希望页面默认加载时显示第一位李的列表。 我已经找到了使用javascript和css显示活动li的方法，但是仅当我需要显示每个li中的跨度时，才会显示该li具有的css。

例：

http://jsfiddle.net/cK6Y5/

HTML

<section id="brandSearch">
    <h2>今日看点</h2>
    <ul id="car-nav">

    <li id="car-01"><a href="#">小型车
    <span>
    <ul><li>帕萨特</li>
    <li>新轩逸</li>
    <li>奥迪A6L</li>
    <li>迈腾</li>
    <li>菲亚特500</li>
    <li>奥迪A4L</li>
    <li>宝马X3</li>
    <li>揽胜极光</li>
    <li>锐界</li>
    <li>爱唯欧</li>
    <li>嘉年华</li>
    <li>荣威W5</li>
    <li>POLO</li>
    <li>奥迪A1</li>
    <li>凯美瑞</li>
    <li>智跑</li>
    <li>斯柯达晶锐</li>
    </ul></span>
    </a></li>

    <li id="car-02"><a href="#">小型车<br>小型车

    <span>
    <ul><li>帕萨特</li>
    <li>新轩逸</li>
    <li>奥迪A6L</li>
    <li>迈腾</li>
    <li>菲亚特500</li>
    <li>奥迪A4L</li>
    <li>宝马X3</li>
    <li>揽胜极光</li>
    <li>锐界</li>
    <li>爱唯欧</li>
    <li>嘉年华</li>
    <li>荣威W5</li>
    <li>POLO</li>
    <li>奥迪A1</li>
    <li>凯美瑞</li>
    <li>智跑</li>
    <li>斯柯达晶锐</li>
    </ul></span>

    </a></li>

    <li id="car-03"><a href="#">家用车

    <span>
    <ul><li>帕萨特</li>
    <li>新轩逸</li>
    <li>奥迪A6L</li>
    <li>迈腾</li>
    <li>菲亚特500</li>
    <li>奥迪A4L</li>
    <li>宝马X3</li>
    <li>揽胜极光</li>
    <li>锐界</li>
    <li>爱唯欧</li>
    <li>嘉年华</li>
    <li>荣威W5</li>
    <li>POLO</li>
    <li>奥迪A1</li>
    <li>凯美瑞</li>
    <li>智跑</li>
    <li>斯柯达晶锐</li>
    </ul></span>

    </a></li>

    <li id="car-04"><a href="#">家用车

    <span>
    <ul><li>帕萨特</li>
    <li>新轩逸</li>
    <li>奥迪A6L</li>
    <li>迈腾</li>
    <li>菲亚特500</li>
    <li>奥迪A4L</li>
    <li>宝马X3</li>
    <li>揽胜极光</li>
    <li>锐界</li>
    <li>爱唯欧</li>
    <li>嘉年华</li>
    <li>荣威W5</li>
    <li>POLO</li>
    <li>奥迪A1</li>
    <li>凯美瑞</li>
    <li>智跑</li>
    <li>斯柯达晶锐</li>
    </ul></span>

    </a></li>

    <li id="car-05"><a href="#">豪华车

    <span>
    <ul><li>帕萨特</li>
    <li>新轩逸</li>
    <li>奥迪A6L</li>
    <li>迈腾</li>
    <li>菲亚特500</li>
    <li>奥迪A4L</li>
    <li>宝马X3</li>
    <li>揽胜极光</li>
    <li>锐界</li>
    <li>爱唯欧</li>
    <li>嘉年华</li>
    <li>荣威W5</li>
    <li>POLO</li>
    <li>奥迪A1</li>
    <li>凯美瑞</li>
    <li>智跑</li>
    <li>斯柯达晶锐</li>
    </ul></span>

    </a></li>

    <li id="car-06"><a href="#">豪华车

    <span>
    <ul><li>帕萨特</li>
    <li>新轩逸</li>
    <li>奥迪A6L</li>
    <li>迈腾</li>
    <li>菲亚特500</li>
    <li>奥迪A4L</li>
    <li>宝马X3</li>
    <li>揽胜极光</li>
    <li>锐界</li>
    <li>爱唯欧</li>
    <li>嘉年华</li>
    <li>荣威W5</li>
    <li>POLO</li>
    <li>奥迪A1</li>
    <li>凯美瑞</li>
    <li>智跑</li>
    <li>斯柯达晶锐</li>
    </ul></span>

    </a></li>

    <li id="car-07"><a href="#">跑车

    <span>
    <ul><li>帕萨特</li>
    <li>新轩逸</li>
    <li>奥迪A6L</li>
    <li>迈腾</li>
    <li>菲亚特500</li>
    <li>奥迪A4L</li>
    <li>宝马X3</li>
    <li>揽胜极光</li>
    <li>锐界</li>
    <li>爱唯欧</li>
    <li>嘉年华</li>
    <li>荣威W5</li>
    <li>POLO</li>
    <li>奥迪A1</li>
    <li>凯美瑞</li>
    <li>智跑</li>
    <li>斯柯达晶锐</li>
    </ul></span>

    </a></li>

    <li id="car-08"><a href="#">SUV

    <span>
    <ul><li>帕萨特</li>
    <li>新轩逸</li>
    <li>奥迪A6L</li>
    <li>迈腾</li>
    <li>菲亚特500</li>
    <li>奥迪A4L</li>
    <li>宝马X3</li>
    <li>揽胜极光</li>
    <li>锐界</li>
    <li>爱唯欧</li>
    <li>嘉年华</li>
    <li>荣威W5</li>
    <li>POLO</li>
    <li>奥迪A1</li>
    <li>凯美瑞</li>
    <li>智跑</li>
    <li>斯柯达晶锐</li>
    </ul></span>

    </a></li>

    <li id="car-09"><a href="#">SUV

    <span>
    <ul><li>帕萨特</li>
    <li>新轩逸</li>
    <li>奥迪A6L</li>
    <li>迈腾</li>
    <li>菲亚特500</li>
    <li>奥迪A4L</li>
    <li>宝马X3</li>
    <li>揽胜极光</li>
    <li>锐界</li>
    <li>爱唯欧</li>
    <li>嘉年华</li>
    <li>荣威W5</li>
    <li>POLO</li>
    <li>奥迪A1</li>
    <li>凯美瑞</li>
    <li>智跑</li>
    <li>斯柯达晶锐</li>
    </ul></span>

    </a></li>

    <li id="car-10"><a href="#">SUV

    <span>
    <ul><li>帕萨特</li>
    <li>新轩逸</li>
    <li>奥迪A6L</li>
    <li>迈腾</li>
    <li>菲亚特500</li>
    <li>奥迪A4L</li>
    <li>宝马X3</li>
    <li>揽胜极光</li>
    <li>锐界</li>
    <li>爱唯欧</li>
    <li>嘉年华</li>
    <li>荣威W5</li>
    <li>POLO</li>
    <li>奥迪A1</li>
    <li>凯美瑞</li>
    <li>智跑</li>
    <li>斯柯达晶锐</li>
    </ul></span>

    </a></li>

    <li id="car-11"><a href="#">皮卡

    <span>
    <ul><li>帕萨特</li>
    <li>新轩逸</li>
    <li>奥迪A6L</li>
    <li>迈腾</li>
    <li>菲亚特500</li>
    <li>奥迪A4L</li>
    <li>宝马X3</li>
    <li>揽胜极光</li>
    <li>锐界</li>
    <li>爱唯欧</li>
    <li>嘉年华</li>
    <li>荣威W5</li>
    <li>POLO</li>
    <li>奥迪A1</li>
    <li>凯美瑞</li>
    <li>智跑</li>
    <li>斯柯达晶锐</li>
    </ul></span>

    </a></li>
    </ul>


    </section><!--end brandSearch-->   

CSS

#car-nav a span ul li {
padding-right: 10px;
padding-left: 10px;
font-size:90%;
line-height:10%;
}
#car-nav a span ul {
width:900px;
}
#car-02 ul {
margin-left:-90px;
}
#car-03 ul {
margin-left:-180px;
}
#car-04 ul {
margin-left:-270px;
}
#car-05 ul {
margin-left:-360px;
}
#car-06 ul {
margin-left:-450px;
}
#car-07 ul {
margin-left:-540px;
}
#car-08 ul {
margin-left:-620px;
}
#car-09 ul {
margin-left:-700px;
}
#car-10 ul {
margin-left:-770px;
}
#car-11 ul {
margin-left:-840px;
}

#car-01 { width: 90px; }
#car-02 { width: 90px; }
#car-03 { width: 90px; }
#car-04 { width: 90px; }
#car-05 { width: 90px; }
#car-06 { width: 90px; }
#car-07 { width: 80px; }
#car-08 { width: 80px; }
#car-09 { width: 70px; }
#car-10 { width: 70px; }
#car-11 { width: 80px; }
#car-01 a:hover { background: url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) no-repeat 0px -0px;
color:#BE191E;}
#car-02 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -90px 0px no-repeat;   
color:#BE191E;}
#car-03 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -180px 0px no-repeat; 
color:#BE191E;}
#car-04 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -270px -0px no-repeat; 
color:#BE191E;}
#car-05 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -360px -0px no-repeat; 
color:#BE191E;}
#car-06 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -450px -0px no-repeat;   
color:#BE191E;}
#car-07 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -540px -0px no-repeat; 
color:#BE191E;}
#car-08 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -620px -0px no-repeat; 
color:#BE191E;}
#car-09 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -700px -0px no-repeat; 
color:#BE191E;}
#car-10 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -770px -0px no-repeat; 
color:#BE191E;}
#car-11 a:hover { background:url(http://www.sarahtrafford.com/epochTimes/images/carsHover.jpg) -840px -0px no-repeat; 
color:#BE191E;}
#car-nav {
width: 920px;
height: 123px;
margin-left: 15px;
padding: 0;
background-image: url(http://www.sarahtrafford.com/epochTimes/images/carNav.jpg);
background-repeat: no-repeat;
position:relative;
}

#car-nav li, #car-nav a {
height: 25px;
display: block;
}

#car-nav li {
float: left;
list-style: none;
display: inline;
font-size:16px;
 }
#car-nav li a {
position: relative;
padding-top:60px;
padding-left:20px;
text-decoration:none;
color:#A2A2A2;
}
#car-nav li a span {
text-indent: 0em;
position: absolute;
top: 120px;
left:10px;
width: 900px;
text-align: justify;
display: none;
font-size:16px;
color:#BE191E;
padding-left:10px;
}

#car-nav li a:hover span {
display: block;
}

Answer 1

首先，您不需要（也不应该）将列表包装在<span>标记中- <span>用于内联元素，列表是一个块元素。 您可以改用<div> ，也可以不包装列表。

如何在第一个列表中添加default类，然后以与#car-nav li a:hover span相同的方式对其进行样式设置。 然后，您可以将侦听器添加到#car-nav li a元素中，以删除悬停时的默认类。 使用jQuery的示例：

$('#car-nav li a').on('hover', function() {
    $('.default').removeClass('default');
});

Answer 2

我同意OverlappingElvis：div应该代替您的跨度。 使用actuel跨度，您可以添加以下内容：

$(document).ready(function() {
    $("#car-01 span").css('display', 'block');
});

如果您将div标签替换为div标签来适应。