jQuery - Chỉ hiển thị một div bất kỳ lúc nào

Question

Tôi đang làm việc trên menu mới, nơi tôi có nhiều div ẩn, nhưng tôi chỉ muốn hiển thị một div trên trang bất kỳ lúc nào.

Đây là mã của tôi; http://jsfiddle.net/sXqnD/

HTML đẹp và đơn giản;

<div id="linkwrapper"> 
<a id="link1" href="#">link1</a><br/> 
<a id="link2" href="#">link2</a><br/> 
<a id="link3" href="#">link3</a> 
</div> 

<div id="infocontent"> 
    <div id="link1content">Information about 1.</div> 
    <div id="link2content">Information about 2.</div> 
    <div id="link3content">Information about 3.</div> 
</div> 

Đây là nỗ lực của tôi tại jQuery, có vẻ như không chơi độc đáo.

$(document).ready(function(){ 

$('#infocontent').children().hide(); 

$('#linkwrapper a').click(function(){ 

    var chosen1 = this.id; 

    $('#infocontent').children('div').each(function(i) { 
     var i = i+1; 
     if($("#" + this.id).is(":visible") == true) { 
      $("#" + this.id).hide(function(){ 
       $("#" + chosen1 + "content").show(); 
      }); 
      return false; 

     } else { 
     $("#" + this.id).show(); 
     return false; 
     } 
    }); 
}); 
}); 

Mọi người có thể thấy tôi đã đi sai hoặc đề xuất giải pháp thanh lịch hơn không?

Answer 1

Cảm ơn tất cả những lời khuyên.

Tôi thấy đây là giải pháp tốt nhất cho những gì tôi đang cố gắng đạt được.

http://jsfiddle.net/sXqnD/15/

HTML

<div id="linkwrapper"> 
    <a id="link1" href="#">link1</a><br/> 
    <a id="link2" href="#">link2</a><br/> 
    <a id="link3" href="#">link3</a> 
</div> 

<div id="infocontent"> 
    <div id="link1content">Information about 1.</div> 
    <div id="link2content">Information about 2.</div> 
    <div id="link3content">Information about 3.</div> 
</div> 

jQuery

$("#infocontent").hide(); 
$("#infocontent div").hide(); 


    $('#linkwrapper a[id]').click(function(){ 

    var vsubmen = this.id +"content"; 

    if($("#infocontent").is(":visible") == false) { 
     $("#" + vsubmen).show('fast',function() { 
      $("#infocontent").slideDown(); 
     }); 
    } else if ($("#" + vsubmen).is(":visible") == false) { 
    $("#infocontent").slideUp('slow',function(){ 
     $("#infocontent div").hide(); 
     $("#" + vsubmen).show(); 
     $("#infocontent").slideDown('slow');  
     }); 
    } else { 
    $("#infocontent").slideUp('slow',function(){ 
     $("#infocontent div").hide(); 
    }); 
    } 
    return false; 
}); 

Answer 2

$('div').filter('#idOfDivToShow').show(); 
$('div').not('#idOfDivToShow').hide(); 

$('div') sẽ tìm tất cả các div trên trang web của bạn. .filter sẽ tìm kiếm trong các kết quả phù hợp với $('div') và so khớp các phần tử có id = idOfDivToShow. .not sẽ tìm kiếm trong các kết quả phù hợp với $('div') và so khớp các phần tử không có id = idOfDivToShow.

Cuối cùng, nếu bạn muốn tìm kiếm chỉ trong vòng một yếu tố đặc biệt, nói #infocontent, sau đó bạn có thể viết:

$('#infocontent').filter('div').filter('#idOfDivToShow').show(); 
$('#infocontent').filter('div').not('#idOfDivToShow').hide(); 

Answer 3

$(window).ready(function(){ 
    /* hide the content divs */ 
    $('#infocontent div').css('display', 'none'); 

    /* add click events */ 
    $('#linkwrapper a').click(function(){ 
     $('#infocontent div').css('display', 'none'); 
     $('#'+this.id+'content').css('display', 'block'); 
    }); 
}); 

Tôi cũng sẽ mất một chút thời gian để thay đổi href liên kết của bạn thuộc tính " javascript: void (null); " để ngăn trang nhảy nếu các liên kết nằm dưới "nếp gấp" của trang.

Answer 4

Làm thế nào về điều này? http://jsfiddle.net/sXqnD/2/

<div id="linkwrapper"> 
    <a id="link1" href="#">link1</a><br/> 
    <a id="link2" href="#">link2</a><br/> 
    <a id="link3" href="#">link3</a> 
</div> 

<div id="infocontent"> 
    <div class="content" id="link1content">Information about 1.</div> 
    <div class="content" id="link2content">Information about 2.</div> 
    <div class="content" id="link3content">Information about 3.</div> 
</div> 

JS:

$(document).ready(function(){ 

    $('#infocontent').children().hide(); 

    $('#linkwrapper a').click(function(){ 
     var chosen1 = this.id; 
     $('.content').hide(); 
     $('#' + chosen1 + 'content').show(); 
    }); 
}); 

Tôi nghĩ rằng bạn sẽ tìm thấy thao tác thứ bằng ID tương tự có định dạng không sẽ rất thoải mái để làm việc với trong dài hạn mặc dù.

Answer 5

tôi sẽ đề nghị đơn giản hóa nó trong hàm nhấp chuột đơn giản giấu tất cả mọi thứ và sau đó hiển thị một trong những bạn muốn

$('#linkwrapper a').click(function(){ 
    $('#infocontent').children('div').each(function(i) { this.hide(); }); 
    $('#' + this.id + 'content').show(); 
}); 

Answer 6

Đối với sự thay đổi nhanh nhất:

Từ

$(document).ready(function(){ 

$('#infocontent').children().hide(); 

$('#linkwrapper a').click(function(){ 

var chosen1 = this.id; 

$('#infocontent').children('div').each(function(i) { 
    var i = i+1; 
    if($("#" + this.id).is(":visible") == true) { 
     $("#" + this.id).hide(function(){ 
      $("#" + chosen1 + "content").show(); 
     }); 
     return false; 

    } else { 
    $("#" + this.id).show(); 
    return false; 
    } 
    }); 
}); 
}); 

Để

$(document).ready(function() { 

    $('#infocontent').children().hide(); 

    $('#linkwrapper a').click(function() { 

     var chosen1 = this.id; 
     $('#infocontent').children().hide(); 
     $("#" + chosen1 + "content").show(); 

    }); 
}); 

tôi về cơ bản thay thế chức năng .each() với 1) cất giấu tất cả những đứa trẻ, và sau đó 2) cho thấy div mong muốn

Answer 7

Giải pháp của tôi là ở đây: http://jsfiddle.net/sXqnD/8/

Code:

$(document).ready(function(){ 

    var $allContentDivs = $('#infocontent div').hide(); // Hide All Content Divs 

    $('#linkwrapper a').click(function(){ 
     var $contentDiv = $("#" + this.id + "content"); 

     if($contentDiv.is(":visible")) { 
      $contentDiv.hide(); // Hide Div 
     } else {    
      $allContentDivs.hide(); // Hide All Divs 
      $contentDiv.show(); // Show Div 
     } 

     return false;   
    }); 
}); 

Answer 8

Đây là câu trả lời gần với những gì bạn có. Nó được dựa trên suy nghĩ này: - tìm của div và chỉ hiển thị các div xác định nếu nó ẩn - ẩn tất cả div khác

$(document).ready(function() { 

      $('#infocontent').children().hide(); 

      $('#linkwrapper a').click(function() { 

       var chosen1 = this.id; 
       var divIdToShow = chosen1 + 'content'; 

       $('#infocontent').children('div').each(function (i) { 
        var currentDiv = $(this); 
        if (this.id == divIdToShow) { 
         if (currentDiv.not(':visible')) { 
          currentDiv.show(); 
         } 
        } else { 
         currentDiv.hide(); 
        } 
       }); 
      }); 
     });