Подскажите как сделать переключение между файлами вид плиткой и вид списком. У меня два файла с выводом списком tab.php , sort_tab.php и два файла с выводом плиткой. sort_tab_img.php , tab_img.php
1 ответ
Это примерно так делается но только состояние надо запоминать как то
$("span#row").on("click", function(){
$(".items").removeClass("columns").addClass("row")
})
$("span#col").on("click", function(){
$(".items").removeClass("row").addClass("columns")
})
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.items.row{
max-width:600px;
display:flex;
flex-wrap:wrap;
margin:100px auto;
}
.items.columns{
max-width:600px;
display:flex;
flex-direction:column;
margin:100px auto;
}
.items.columns .item{
width:90%;
height:200px;
background:red;
border:1px solid #fff;
margin:5px auto;
}
.items.row .item{
width:200px;
height:200px;
background:red;
border:1px solid #fff;
}
.panel{
width:100%;
height:50px;
position:absolute;
top:0;
}
span#row{
display:inline-block;
width:50px;
height:50px;
text-align:center;
line-height:16px;
vertical-align:top;
}
span#row i{
display:inline-block;
width:9px;
height:9px;
background:blue;
margin:0;
}
span#col{
display:inline-block;
width:50px;
height:50px;
text-align:center;
line-height:16px;
vertical-align:top;
}
span#col i{
display:inline-block;
width:90%;
height:9px;
background:blue;
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel">
<span id="row">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</span>
<span id="col">
<i></i>
<i></i>
<i></i>
</span>
</div>
<div class="items row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>