0

Подскажите как сделать переключение между файлами вид плиткой и вид списком. У меня два файла с выводом списком tab.php , sort_tab.php и два файла с выводом плиткой. sort_tab_img.php , tab_img.php

введите сюда описание изображения

введите сюда описание изображения

введите сюда описание изображения

0

1 ответ 1

0

Это примерно так делается но только состояние надо запоминать как то

$("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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.