Установка элемента <li>как активного при загрузке

Question

Я делаю всплывающее меню из 11 пунктов, которые можно расположить слева и поле для контента справа. При наведении курсора он работает нормально, но я хочу, чтобы первый элемент «Обзор» был установлен как «активный» при загрузке страницы, давая пользователям описание того, что представляют собой другие элементы. Я попытался вставить "onload =" document.getElementById ('switch1'). Focus (); "" во встроенном для нужного тега li, ранее в Javascript, и встроенном в теге 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>

Answer 1

Почему бы просто не сделать это активным в CSS? Добавьте класс .sel к # switch1 и аналогичный '.sel' к первому #slides > div ~ #slides > div:first. Затем с помощью Jquery в событии click для ссылок левой руки вы можете добавить класс .sel к новой выбранной панели ссылок / контента, чтобы сделать их активными.

Answer 2

Попробуйте это ..

$(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» изначально, а не при наведении курсора.Hover - это CSS, mouseOver - это событие JavaScript.Мои извенения!Но это сработает.Вы также можете назвать это по имени.Причина, по которой вы хотите сделать это таким образом, заключается в том, что вы можете изменить имя класса однажды, и таким образом вам не придется обновлять свой JavaScript, чтобы сохранить функциональность.

Answer 3

Попробуйте вызвать функцию init внутри

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