要顯示基於按鈕的網格/圖表

Question

我正在使用MVC3，我有2個圖標一個用於網格，另一個用於圖表當我選擇網格圖標時，頁面必須顯示網格並選擇圖表頁面應該顯示chart.i'm使用下面的HTML什麼jQuery代碼我需要添加特定的視圖？

<li>Selected View 
    <div class="selectView"> 
     <a href="#"></a><a href="#"></a> 
    </div> 
</li> 

Answer 1

我假設在這裏，你有網格和圖表預渲染在你的網頁上，並且都隱藏。此外，我假設您的網格具有類.grid，並且您的圖表具有類.chart。

你可以寫這樣的：

$(document).ready(function(){ 

    var gridVisible = false, 
     chartVisible = false; 

    // I'm using the equals (eq) selector because your buttons have no classes 
    // to identify them properly 
    $(".selectView a:eq(0)").on("click", function() { 
     if (gridVisible === false) { 
      $(".grid").show(); 
      gridVisible = true; 
     } else { 
      $(".grid").hide(); 
      gridVisible = false; 
     } 
     return false; 
    }); 

    $(".selectView a:eq(1)").on("click", function() { 
     if (chartVisible === false) { 
      $(".chart").show(); 
      chartVisible = true; 
     } else { 
      $(".chart").hide(); 
      chartVisible = false; 
     } 
     return false; 
    });  
}); 

的按鈕現在切換網格和圖表的知名度。這意味着您可以使用相同的按鈕顯示和隱藏它。如果你在設計，你可以在按鈕上切換設計相關的類。像btn-show或btn-hide。然後在你的CSS樣式中添加不同的顏色或圖標。