javascript - hacer - remove hover jquery
¿Cómo se intercambian los DIV en mouseover?(jquery?) (5)
Aquí está la versión jQuery:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function () {
$("#switches li").mouseover(function () {
var $this = $(this);
$("#slides div").hide();
$("#slide" + $this.attr("id").replace(/switch/, "")).show();
$("#switches li").css("font-weight", "normal");
$this.css("font-weight", "bold");
});
});
</script>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I''m gone!</div>
</div>
Este es el segundo efecto de rollover más simple, aún así no encuentro ninguna solución simple.
Se busca: tengo una lista de elementos y una lista de diapositivas (DIV) correspondiente. Después de cargar, se debe seleccionar el primer elemento de la lista (negrita) y la primera diapositiva debe estar visible. Cuando el usuario pasa el cursor sobre otro elemento de la lista, ese elemento de la lista debe seleccionarse en su lugar y se mostrará la diapositiva correspondiente.
El siguiente código funciona, pero es horrible . ¿Cómo puedo obtener este comportamiento de una manera elegante? jquery tiene docenas de efectos de rollover animados y complicados, pero no encontré una manera limpia para este efecto.
<script type="text/javascript">
function switchTo(id) {
document.getElementById(''slide1'').style.display=(id==1)?''block'':''none'';
document.getElementById(''slide2'').style.display=(id==2)?''block'':''none'';
document.getElementById(''slide3'').style.display=(id==3)?''block'':''none'';
document.getElementById(''slide4'').style.display=(id==4)?''block'':''none'';
document.getElementById(''switch1'').style.fontWeight=(id==1)?''bold'':''normal'';
document.getElementById(''switch2'').style.fontWeight=(id==2)?''bold'':''normal'';
document.getElementById(''switch3'').style.fontWeight=(id==3)?''bold'':''normal'';
document.getElementById(''switch4'').style.fontWeight=(id==4)?''bold'':''normal'';
}
</script>
<ul id="switches">
<li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide</li>
<li id="switch2" onmouseover="switchTo(2);">Second slide</li>
<li id="switch3" onmouseover="switchTo(3);">Third slide</li>
<li id="switch4" onmouseover="switchTo(4);">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I''m gone!</div>
</div>
Aquí está mi versión jQuery light-markup:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function switchTo(i) {
$(''#switches li'').css(''font-weight'',''normal'').eq(i).css(''font-weight'',''bold'');
$(''#slides div'').css(''display'',''none'').eq(i).css(''display'',''block'');
}
$(document).ready(function(){
$(''#switches li'').mouseover(function(event){
switchTo($(''#switches li'').index(event.target));
});
switchTo(0);
});
</script>
<ul id="switches">
<li>First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div>Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I''m gone!</div>
</div>
Esto tiene la ventaja de mostrar todas las diapositivas si el usuario tiene Javascript desactivado, usa muy pocas marcas HTML y el javascript es bastante legible. La función switchTo toma un número de índice de qué <li> / <div> par activar, restablece todos los elementos relevantes a sus estilos predeterminados (no negrita para los elementos de la lista, display:none para los DIV) y establece la list-item deseada list-item y div en bold y display . Siempre que el cliente tenga javascript habilitado, la funcionalidad será exactamente la misma que su ejemplo original.
En lugar de mostrar todas las diapositivas cuando JS está desactivado (lo que probablemente rompería el diseño de la página) colocaría dentro del interruptor LIs enlaces reales A al código del lado del servidor que devuelve la página con la clase "activa" preestablecida en el interruptor adecuado /diapositiva.
$(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 .active {
font-weight: bold;
}
#slides div {
display: none;
}
#slides div.active {
display: block;
}
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="switch.js"></script>
</head>
<body>
<ul id="switches">
<li class="active">First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div class="active">Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I''m gone!</div>
</div>
</body>
</html>
Lo único que está mal con este código (al menos para mí) es que no estás usando un bucle para procesar todos los elementos. Aparte de eso, ¿por qué no hacerlo así?
Y con el bucle, me refiero a agarrar el elemento contenedor a través de un JQuery e iterar sobre todos los elementos secundarios, básicamente, un único liner.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$( ''#switches li'' ).mouseover(
function(){
$( "#slides div" ).hide();
$( ''#switches li'' ).css( ''font-weight'', ''normal'' );
$( this ).css( ''font-weight'', ''bold'' );
$( ''#slide'' + $( this ).attr( ''id'' ).replace( ''switch'', '''' ) ).show();
}
);
}
);
</script>
</head>
<body>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide</li>
<li id="switch2">Second slide</li>
<li id="switch3">Third slide</li>
<li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I''m gone!</div>
</div>
</body>
</html>