Làm cách nào để trao đổi DIV khi di chuột qua? (jquery?)

Đây là hiệu ứng rollover đơn giản nhất thứ hai, tôi vẫn không tìm thấy bất kỳ giải pháp đơn giản nào.Làm cách nào để trao đổi DIV khi di chuột qua? (jquery?)

Muốn: Tôi có danh sách các mục và danh sách các trang trình bày (DIV) sửa lỗi. Sau khi tải, mục danh sách đầu tiên sẽ được chọn (in đậm) và trang chiếu đầu tiên sẽ hiển thị. Khi người dùng di chuột qua một mục danh sách khác, mục danh sách đó sẽ được chọn thay thế và bản chiếu tương ứng được hiển thị.

Mã sau hoạt động, nhưng quá khủng khiếp. Làm thế nào tôi có thể có được hành vi này một cách thanh lịch? jquery có hàng chục hiệu ứng rollover hoạt hình và phức tạp, nhưng tôi đã không nghĩ ra một cách rõ ràng cho hiệu ứng này.

<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>

Nguồn

2008-08-29 flight

Thay vì hiển thị tất cả các slide khi JS tắt (mà có khả năng sẽ phá vỡ bố cục trang) tôi sẽ đặt bên trong LIS switch thực Một liên kết đến Server- mã phụ trả về trang có lớp "hoạt động" được đặt trước trên nút chuyển/trượt thích hợp.

$(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>

Nguồn

2008-08-29 16:49:56

thay vì làm điều này. Tôi khuyên bạn nên sử dụng chức năng dữ liệu: $ (this) .data ('slide', trang trình bày [idx]); Bằng cách đó bạn không làm lộn xộn DOM với dữ liệu. –

Điểm tốt, cảm ơn. Đã chỉnh sửa để bao gồm đề xuất này. –

Điều duy nhất sai với mã này (ít nhất là với tôi) là bạn không sử dụng vòng lặp để xử lý tất cả các phần tử. Ngoài ra, tại sao lại không như vậy?

Và với vòng lặp, ý tôi là lấy phần tử vùng chứa qua một JQuery và lặp qua tất cả các phần tử con - về cơ bản là một lớp lót.

Nguồn

2008-08-29 16:08:41

Dưới đây là phiên bả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>

Nguồn

2008-08-29 16:21:23 travis

<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>

Nguồn

2008-08-29 16:30:30

Dưới đây là tôi ánh sáng đánh dấu jQuery phiên bản:

<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>

này có lợi thế là hiển thị tất cả các slide nếu người dùng đã javascript tắt, sử dụng đánh dấu HTML rất ít và javascript là khá dễ đọc. Chức năng switchTo mất một số chỉ số trong đó <li>/<div> cặp để kích hoạt, reset tất cả các yếu tố có liên quan đến phong cách mặc định của họ (không đậm cho các hạng mục danh sách, display:none cho DIV) và các bộ mong muốn list-item và div-bold và display . Miễn là khách hàng đã bật javascript, chức năng sẽ chính xác giống như ví dụ ban đầu của bạn.

Nguồn

2008-08-29 16:53:06 Neall

Làm cách nào để trao đổi DIV khi di chuột qua? (jquery?)

Trả lời

Các vấn đề liên quan