我正在制作一个飞出式菜单,其中有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>
答案 0 :(得分:0)
尝试在
中调用init函数$(document).ready(function() {
init();
// rest of your code
});
答案 1 :(得分:0)
为什么不在CSS中激活它?将一个类.sel
添加到#switch1,将类似的“.sel”添加到第一个#slides > div
〜#slides > div:first
。然后通过Jquery,在左侧链接的点击事件中,您可以将“.sel”类添加到新选定的链接/内容面板中以使它们处于活动状态。
答案 2 :(得分:0)
试试这个..
$(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以保留功能。