Javascript 设置一个<；李>；元素为；主动的；空载

我正在制作一个弹出菜单，其中有11个项目可以在左侧鼠标悬停，在右侧有一个内容框。在鼠标上，它工作正常，但我希望在页面加载时将第一个元素“Overview”设置为“active”，为用户提供其他元素的描述。我尝试过粘贴“onload=”document.getElementById（'switch1'）.focus（）；“”在Javascript前面的所需li标记的内联中，以及在body标记的内联中，都没有用。也许我没有正确地添加它？是否有更好的解决方案突出显示该元素？任何帮助都将是惊人的！先谢谢你

function init() {
document.getElementById('switch1').focus();
}
window.onload = init;
            $(document).ready(function() {
        switches = $('#switches > li');
        slides = $('#slides > div');
        switches.each(function(idx) {
                $(this).data('slide', slides.eq(idx));
            }).hover(
            function() {

                switches.removeClass('active');
                slides.removeClass('active');             
                $(this).addClass('active');  
                $(this).data('slide').addClass('active');
            });
        });

.4Column{
width: 250px;
height: 239px;
float:left;
margin-left:30px;}

#switches .hover {
background-position: left center;
display: block;}

#switches .active {
font-weight: bold;
background-position:left bottom;}

#switches li {
padding-left:10px;
background-image:url(../images/ManageArrows.jpg);
background-repeat:no-repeat;
height:20px;
width:230px;}

#slides div {
display: none;}

#slides div.active {
    display: block;}

.IndySlide{
    width: 336px;
height: 255px;
float:left;
background-color:#FFF;}

#switch1{
padding-left:10px;
background-image:url(../images/ManageArrows.jpg);
background-repeat:no-repeat;
width: 230px;
height: 20px;}

#switch1 .active{
font-weight: bold;
background-position:left bottom;}


<div class="4Column" style="width:250px; height:239px; float:left; margin-left:0px;">
    <div id="featured">
        <ul id="switches" class="active">
            <li id="switch1">Overview</li>
            <li id="switch2">Agriculture</li>
            <li id="switch3">Forests</li>
        </ul>
</div>
</div>
<div class="4Column" style="width:335px; height:255px; float:left; margin-left:20px;">
    <div id="slides">
        <div class="IndySlide"><!-- Overview -->
            <p>This is a list of the most amazingestest links on the DNR baby sites.</p>
        </div>
    <div class="IndySlide" style="background-image:url(images/cowbg.png);"><!-- Agriculture -->
        <ul>
            <li><a href="http://dnr.alaska.gov/ag/ag_calendar_2012.htm">Ag event calendar</a></li>
            <li><a href="http://dnr.alaska.gov/ag/ag_bac.htm">Ag board meetings</a></li>
        </ul>
    </div>
    <div style="background-image:url(images/forestrybg.png);width:336px; height:255px;"><!-- Forests -->
        <ul>
            <li><a href="http://forestry.alaska.gov/stateforests.htm">State Forests</a></li>
            <li><a href="http://forestry.alaska.gov/burn/">Burn permits</a></li>
            <li><a href="http://forestry.alaska.gov/fire/current.htm">Fire information</a></li>
        </ul>
     </div>
 </div>

函数init（）{
document.getElementById（'switch1'）.focus（）；
}
window.onload=init；
$（文档）.ready（函数（）{
开关=$（“#开关>li”）；
幻灯片=$（“#幻灯片>div”）；
开关。每个（功能（idx）{
$（this.data（'slide'，slides.eq（idx））；
}).悬停(
函数（）{
switches.removeClass（'active'）；
slides.removeClass（'active'）；
$（this.addClass（'active'）；
$（this）.data（'slide'）.addClass（'active'）；
});
});
.4列{
宽度：250px；
高度：239px；
浮动：左；
左边距：30px；}
#开关，悬停{
背景位置：左中；
显示：block；}
#开关。激活{
字体大小：粗体；
背景位置：左下；}
#开关李{
左侧填充：10px；
背景图像：url（../images/ManageArrows.jpg）；
背景重复：无重复；
高度：20px；
宽度：230px；}
#幻灯片组{
显示：无；}
#幻灯片分区活动{
显示：block；}
英迪斯利德先生{
宽度：336px；
高度：255px；
浮动：左；
背景色：#FFF；}
#开关1{
左侧填充：10px；
背景图像：url（../images/ManageArrows.jpg）；
背景重复：无重复；
宽度：230px；
高度：20px；}
#开关1.激活{
字体大小：粗体；
背景位置：左下；}

概述
农业
森林

这是DNR婴儿网站上最令人惊讶的链接列表

尝试调用

$(document).ready(function() { 
    init();
    // rest of your code
});

---

为什么不在CSS中激活它呢？将类

.sel

添加到#switch1，并将类似的.sel添加到第一个

#slides>div

~

#slides>div:first

。然后，通过Jquery，在左侧链接的click事件上，您可以将“.sel”类添加到新选择的链接/内容面板中，使其处于活动状态。

试试这个

$(document).ready(function() {
    switches = $('#switches > li');
    slides = $('#slides > div');
    switches.each(function(idx) {
            $(this).data('slide', slides.eq(idx));
        }).hover(
        function() {

            switches.removeClass('active');
            slides.removeClass('active');             
            $(this).addClass('active');  
            $(this).data('slide').addClass('active');
        });

    switches.first().trigger('mouseover');
});

---

我最初错误地放了“悬停”，而不是鼠标悬停。Hover是CSS，mouseOver是JavaScript事件。我道歉！但这会奏效的。你也可以叫它名字。但是，您之所以希望这样做，是因为您可能有一天会更改类的名称，这样您就不必更新JavaScript来保留功能。

谢谢！我不熟悉jquery和javascript。你怎么写的？我试过了，但似乎不起作用。是否可以按名称调用它（开关1）？请参阅编辑。我更改了

开关.first（）.trigger（'hover'）

，这与正确的

开关是错误的。first（）.trigger（'mouseover'）

，可以正常工作。