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

尝试在

中调用init函数

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

Answer 2

为什么不在CSS中激活它？将一个类.sel添加到＃switch1，将类似的“.sel”添加到第一个#slides > div〜#slides > div:first。然后通过Jquery，在左侧链接的点击事件中，您可以将“.sel”类添加到新选定的链接/内容面板中以使它们处于活动状态。

Answer 3

试试这个..

$(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以保留功能。

在onload上将<li>元素设置为“active”</li>

3 个答案: