在列表/网格视图切换器中显示默认网格

display grid as default in list/grid view switcher

本文关键字：网格 显示 默认 切换器 视图 列表      更新时间：2023-09-26
   http://jsfiddle.net/akarun/LJf9p/

我需要这个jsfiddle代码在我的网页实现。问题是我不知道如何使网格显示为默认值。在这个演示中，列表显示为默认值。我需要将网格显示为默认值，然后当我按下列表视图时，将显示为列表。

$('button').click(function(e) {
    if ($(this).hasClass('grid')) {
        $('#container ul').removeClass('list').addClass('grid');
    }
    else if($(this).hasClass('list')) {
        $('#container ul').removeClass('grid').addClass('list');
    }
});
#container ul { list-style: none; }
#container .buttons { margin-bottom: 20px; }
#container .list li { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; }
#container .grid li { float: left; width: 20%; height: 50px; border-right: 1px dotted #CCC; border-bottom: 1px dotted #CCC; padding: 20px; }
<div id="container">
    <div class="buttons">
        <button class="grid">Grid View</button>
        <button class="list">List View</button>
    </div>
    
    <ul class="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
    </ul>
</div>

默认情况下，您的HTML中有class="List"，将其更改为class="grid"

你可以这样做:

http://jsfiddle.net/LJf9p/851/

$(document).ready(function() {
  $('#container ul').addClass('grid');
  $('button').click(function(e) {
    if ($(this).hasClass('grid')) {
      $('#container ul').removeClass('list').addClass('grid');
    } else if ($(this).hasClass('list')) {
      $('#container ul').removeClass('grid').addClass('list');
    }
  });
})

在document ready事件中，将grid类设置为$('#container ul')元素

相关文章：