당신은 어떻게 스왑 Div 에 mouseover(jQuery)?
-
09-06-2019 - |
문제
이 가장 두 번째로 가장 간단한 롤오버 효과도 찾지 못하면 어떤 간단한 솔루션을 제공합니다.
원하는: 내 항목 목록과 대응 목록의 슬라이드(Div).로드 한 후,첫 번째 목록 항목을 선택해야(bold)그리고 첫 번째 슬라이드 표시되어야 합니다.위에 마우스 포인터를 놓으면 다른 항목이 있는 목록 항목을 선택해야 합 대신에 해당하는 슬라이드 표시됩니다.
다음 코드를 사용해야 합니다,하지만 은 끔.어떻게 받을 수 있는 이 행동에서는 우아한 방법?jquery 은 애니메이션과 복잡한 효과 롤오버,하지만 내가 오지 않았으로 깨끗한 방법이 효과가 있다.
<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>
해결책
를 표시하는 것이 아니라 모든 슬라이드 할 때 JS off(는 것을 가능성이 페이지 레이아웃을)내에서 스위치 LIs 는 진정한 연결을 server-side 코드를 반환하는 페이지와 함께"active"등을 미리 설정에 적절 한 스위치/슬라이드입니다.
$(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>
다른 팁
여기에는 나의 빛 태그 jQuery 버전:
<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>
이것은 장점을 보여주기의 모든 슬라이드 하는 경우 사용자가 해제 하는 자바 스크립트,사용하는 아주 작은 HTML 태그와 자바스크립트가 꽤 읽을 수 있습니다.이 switchTo
함수 인덱스 번호 <li>
/ <div>
쌍을 활성화,리셋은 모든 관련 요소들이 기본 스타일(non-굵은 목록 항목에, display:none
에 대한 Div)과 세트는 원하는 list-item
고 div
하기 bold
고 display
.만큼의 클라이언트는 자바 스크립트를 활성화 기능을 될 것입니다 정확히 같은 원래 예입니다.
여기에 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>
<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>
는 유일한 것이 잘못된 이 코드(적어도 나)는 당신이 사용하지 않는 루프 프로세스의 모든 요소입니다.다른 것보다는 왜 그것을 좋아하는가?
와 루프는 나는 의미를 잡는 컨테이너 요소를 통해 JQuery 고 반복하는 모든 자식 요소가 기본적으로는 한-라이너입니다.