我有一个项目列表,然后有网格、列表和紧凑视图的更改视图选项。用户打开链接时的默认值将是一个网格(我已经实现了(。我试图实现的是当用户单击列表视图时,然后下次当用户再次打开该页面时,它应该是用户上次选择的视图。 JSFiddle here
这是我的代码:
$('li').on('click', function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('compact').addClass('grid');
}
if ($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
if ($(this).hasClass('list')) {
$('#container ul').removeClass('compact').addClass('list');
}
if ($(this).hasClass('compact')) {
$('#container ul').removeClass('list').addClass('compact');
} else if ($(this).hasClass('compact')) {
$('#container ul').removeClass('grid').addClass('compact');
}
});
$('document').ready(function() {
$('.menu li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide();
$div.slideToggle();
});
});
.menu ul li button:hover {
background-color: rgba(206, 0, 0, 1);
}
.active {
background-color: rgba(30, 30, 30, 1);
}
#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;
}
#container .compact li {
float: left;
width: 30%;
height: 50px;
border-right: 1px dotted #CCC;
border-bottom: 1px dotted #CCC;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li class="grid"> <a href='#' id="show2">Grid</a></li>
<li class="list"> <a href='#' id="show3">List</a></li>
<li class="compact"> <a href='#' id="show1">Compact</a></li>
</ul>
</div>
<div id="container">
<ul class="grid">
<li>Item 2</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>
</div>
一种方法是将选择存储为 cookie,然后在文档加载时检查该 cookie 并相应地设置布局,示例
$('li').on('click', function(e) {
if ($(this).hasClass('grid')) {
document.cookie = "menuChoice=grid";
$('#container ul').removeClass('list').addClass('grid');
$('#container ul').removeClass('compact').addClass('grid');
}
if ($(this).hasClass('list')) {
document.cookie = "menuChoice=list";
$('#container ul').removeClass('grid').addClass('list');
$('#container ul').removeClass('compact').addClass('list');
}
if ($(this).hasClass('compact')) {
document.cookie = "menuChoice=compact";
$('#container ul').removeClass('list').addClass('compact');
$('#container ul').removeClass('grid').addClass('compact');
}
});
$('document').ready(function() {
switch (getCookie("menuChoice")) {
case 'grid':
$('#container ul').removeClass('list').addClass('grid');
$('#container ul').removeClass('compact').addClass('grid');
break;
case 'list':
$('#container ul').removeClass('list').addClass('list');
$('#container ul').removeClass('compact').addClass('list');
break;
case 'compact':
$('#container ul').removeClass('list').addClass('compact');
$('#container ul').removeClass('compact').addClass('compact');
break;
default:
break;
}
$('.menu li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide();
$div.slideToggle();
});
});
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
.menu ul li button:hover {
background-color: rgba(206, 0, 0, 1);
}
.active {
background-color: rgba(30, 30, 30, 1);
}
#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;
}
#container .compact li {
float: left;
width: 30%;
height: 50px;
border-right: 1px dotted #CCC;
border-bottom: 1px dotted #CCC;
padding: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li class="grid"> <a href='#' id="show2">Grid</a>
</li>
<li class="list"> <a href='#' id="show3">List</a>
</li>
<li class="compact"> <a href='#' id="show1">Compact</a>
</li>
</ul>
</div>
<div id="container">
<ul class="grid">
<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>
</div>
由于这是沙盒cookie不起作用,请参阅我的JSfiddle http://jsfiddle.net/Alessi42/7Ln5dc2t/以获取工作示例。
希望这有帮助!