(jQuery) Chuyển đổi kiểu div "display: none" thành "display: inline"

Question

Tôi có 2 div và tôi muốn có thể chuyển đổi giữa chúng trên một nút bấm (hiện đang sử dụng .toggle();)

div hiển thị trên trang là div1. Div này có kiểu 'display: inline'. Div khác của tôi (div2) bắt đầu với kiểu 'display: none'.

Khi div1 chuyển sang div2, tôi muốn div2 có kiểu "display: inline". Làm thế nào để tôi làm điều này?

EDIT: Đây là hoạt động:

$(function(){ 
    $('#button').click(function(){ 

    $('#div1').toggleClass('hide'); 

if ($('#div2').is('.hidden')) { 

      $('#div2').removeClass('hidden'); 
      $('#div2').addClass('show'); 


     } 
     else{ 

      $('#div2').addClass('hidden'); 
      $('#div2').removeClass('show'); 


     } 


    }); 
}); 

Answer 1

Tôi sẽ sử dụng .toggleClass() như cần gạt giữa display: inline; và display: block;

Tạo một lớp ẩn và nội tuyến và chỉ chuyển đổi những.

Answer 2

Sử dụng đồng bằng JavaScript, bạn có thể sử dụng:

document.getElementById('div1').style.display = 'none'; 
document.getElementById('div2').style.display = 'inline'; 

Answer 3

Đây là một cách đơn giản để làm điều đó:

1. Đối với html, chúng ta có một nút đơn giản để gọi là "toggleFunction" sẽ thêm và xóa các lớp hiển thị vào các phần tử Div của chúng ta khi cần thiết.

   <button onclick="toggleFunction()" >Click to toggle</button>

   <div id="div1" class=" " > Now showing "Div 1" </div>

   <div id="div2" class=" " > Now showing "Div 2" </div>

2. Chúng tôi sẽ thiết lập các thuộc tính hiển thị mặc định của Div 1 và Div 2 để "inline" và "none" tương ứng, do đó theo mặc định:

   • Div 1 được hiển thị và
   • Div 2 bị ẩn.

Đây là css cho rằng:

#div1 { 
    display: inline; 
    color:blue; 
} 

#div2 { 
    display: none; 
    color:red; 
} 

.display-none { 
    display: none !important; 
} 

.display-inline { 
    display: inline !important; 
} 

3. Cuối cùng, chúng tôi sẽ sử dụng jQuery để thêm và loại bỏ các "màn hình-none" và các lớp "display-inline" thành Div 1 và Div 2 tương ứng bằng cách gọi "toggleFunction" của chúng tôi khi nút được nhấp.

Đây là Jquery cho rằng:

function toggleFunction() { 
    $("#div1").toggleClass("display-none");  
    $("#div2").toggleClass("display-inline");  
    } 

Bạn có thể thử nó ra trên codepen đây: http://codepen.io/anon/pen/vEbXwG