时间戳

首页 > 解决方案 > 如何使用 JQuery 更改 div 的顺序

html - 如何使用 JQuery 更改 div 的顺序

问题描述

$(document).ready(function() {
     
    $('.btn_activite').click(function() {
        $('#activite').addClass('active');
        $('#gestion').removeClass('active');
        $('#creation').removeClass('active');
        $('#contenu').removeClass('active');
        $('#quotidien').removeClass('active');
        $('#temps').removeClass('active');
    });
    
    $('.btn_gestion').click(function() {
        $('#activite').removeClass('active');
        $('#gestion').addClass('active');
        $('#creation').removeClass('active');
        $('#contenu').removeClass('active');
        $('#quotidien').removeClass('active');
        $('#temps').removeClass('active');
    });
    
    $('.btn_creation').click(function() {
        $('#activite').removeClass('active');
        $('#gestion').removeClass('active');
        $('#creation').addClass('active');
        $('#contenu').removeClass('active');
        $('#quotidien').removeClass('active');
        $('#temps').removeClass('active');
    });
    
    $('.btn_contenu').click(function() {
        $('#activite').removeClass('active');
        $('#gestion').removeClass('active');
        $('#creation').removeClass('active');
        $('#contenu').addClass('active');
        $('#quotidien').removeClass('active');
        $('#temps').removeClass('active');
    });
    
    $('.btn_quotidien').click(function() {
        $('#activite').removeClass('active');
        $('#gestion').removeClass('active');
        $('#creation').removeClass('active');
        $('#contenu').removeClass('active');
        $('#quotidien').addClass('active');
        $('#temps').removeClass('active');
    });
    
    $('.btn_temps').click(function() {
        $('#activite').removeClass('active');
        $('#gestion').removeClass('active');
        $('#creation').removeClass('active');
        $('#contenu').removeClass('active');
        $('#quotidien').removeClass('active');
        $('#temps').addClass('active');
    });
});
@charset "UTF-8";
@import url("../webfonts/GothamBook/stylesheet.css");
body {
    font-family: GothamBook;
    color: #FEFEFE;
}

.flex-container {
    DISPLAY: FLEX;
    justify-content: space-between;
    width: 100%;
    color: #FFFFFF;
}
.item {
    background-color: black;
    width: 5%;
    margin: 2px;
}
.item-activite {
    background-color: black;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.item-gestion {
    background-color: #4D4D4D;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.item-creation {
    background-color: #40A9F5;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.item-cont {
    background-color: #362984;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.item-quot {
    background-color: #662D91;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.item-temps {
    background-color: #42A246;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.font-black {
    color: #000000;
}
.font-grn {
    color: #42A246;
}
.container {
    display: flex;
    justify-content: center;
    align-content: center;
}
#activite, #gestion, #creation, #contenu, #quotidien, #temps {
    display: none;
}
#activite.active  ,#gestion.active , #creation.active  ,#contenu.active  ,#quotidien.active , #temps.active{
    display: block;
}
a {
    text-decoration: none;
    color: #FFFFFF;
}
.btn_activite, .btn_gestion, .btn_creation, .btn_contenu, .btn_quotidien, .btn_temps {
    transition: .2s ease;
    -webkit-transition: .2s ease;
    cursor: pointer;
}
.btn_activite:hover, .btn_gestion:hover, .btn_creation:hover , .btn_contenu:hover, .btn_quotidien:hover, .btn_temps:hover{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Menu ACCES CBR -->
<div class="flex-container">
   <div class="item">
   </div>
   <div class="item-activite">
      <a class="btn_activite" href="#" >
         Activité Assurance Q+
      </a>
   </div>
   <div class="item-gestion">
      <a href="#" class="btn_gestion">
         Gestion Assurance Q+
      </a>
   </div>
   <div class="item-creation">
      <a class="btn_creation" href="#" >
         Recherche - création
      </a>
   </div>
   <div class="item-cont">
      <a href="#" class="btn_contenu">
         Recherche - Contenu
      </a>
   </div>
   <div class="item-quot">
      <a class="btn_quotidien" href="#">
         Quotidien | Hebdo +
      </a>
   </div>
   <div class="item-temps">
      <a href="#" class="btn_temps">
         Temps | Chrono
      </a>
   </div>
   <div class="item">
   </div>
</div>
<!-- Page Activite -->
<div class="container active" id="activite">
   <h1>
      Activité Assurance Q+
   </h1>
</div>
<div class="container" id="gestion">
   <h1>
      Gestion Assurance Q+
   </h1>
</div>

<!-- Page Recherche creation -->
<div class="container" id="creation">
   <h1>
      Recherche Creation
   </h1>
</div>

<!-- Page Aventuriers -->
<div class="container" id="contenu">
   <h1>
      Recherche Contenu
   </h1>
</div>

<!-- Page Équipiers -->
<div class="container" id="quotidien">
   <h1>
      Quotidien | Hebdo +
   </h1>
</div>

<!-- Page Supporters -->
<div class="container" id="temps">
   <h1>
      Temps | Chrono
   </h1>
</div>

这是一个包含 6 个元素的顶部菜单，每个元素的宽度为 15%。忽略 div class="item" 元素，因为它们只填充了菜单两侧的另外 10%。

我想要的是改变 6 个类的顺序，所以当我点击 btn_creation 时，例如，这个菜单移动到位置 2（位置 1 和 8 是填充物 - 类“项目”，我只使用位置 2 到 7） .

希望清楚吗？

基本上我点击的任何东西都会转到位置 2，其余的都向右移动。

ps 代码在这里不能正常工作，但在我的电脑上它可以工作......对不起，我第一次在这里这样做。

标签： htmljqueryflexbox

解决方案

我相信下面的可运行示例是要实现的目标？

唯一的变化是 jQuery 处理。所有当前的处理都被注释掉，替换为document.ready函数末尾的短代码片段。见那里的评论。

$(document).ready(function() {
/*
    $('.btn_activite').click(function() {
        $('#activite').addClass('active');
        $('#gestion').removeClass('active');
        $('#creation').removeClass('active');
        $('#contenu').removeClass('active');
        $('#quotidien').removeClass('active');
        $('#temps').removeClass('active');
    });
    
    $('.btn_gestion').click(function() {
        $('#activite').removeClass('active');
        $('#gestion').addClass('active');
        $('#creation').removeClass('active');
        $('#contenu').removeClass('active');
        $('#quotidien').removeClass('active');
        $('#temps').removeClass('active');
    });
    
    $('.btn_creation').click(function() {
        $('#activite').removeClass('active');
        $('#gestion').removeClass('active');
        $('#creation').addClass('active');
        $('#contenu').removeClass('active');
        $('#quotidien').removeClass('active');
        $('#temps').removeClass('active');
    });
    
    $('.btn_contenu').click(function() {
        $('#activite').removeClass('active');
        $('#gestion').removeClass('active');
        $('#creation').removeClass('active');
        $('#contenu').addClass('active');
        $('#quotidien').removeClass('active');
        $('#temps').removeClass('active');
    });
    
    $('.btn_quotidien').click(function() {
        $('#activite').removeClass('active');
        $('#gestion').removeClass('active');
        $('#creation').removeClass('active');
        $('#contenu').removeClass('active');
        $('#quotidien').addClass('active');
        $('#temps').removeClass('active');
    });
    
    $('.btn_temps').click(function() {
        $('#activite').removeClass('active');
        $('#gestion').removeClass('active');
        $('#creation').removeClass('active');
        $('#contenu').removeClass('active');
        $('#quotidien').removeClass('active');
        $('#temps').addClass('active');
    });
*/
    // For any <a> tag class that starts with btn_
    $('a[class^="btn_"]').click(function() {
       // Get the parent div and move it after the
       // first div. (with the item class)
       $(this).parent().insertAfter($('.item')[0]);
    });
});
@charset "UTF-8";
@import url("../webfonts/GothamBook/stylesheet.css");
body {
    font-family: GothamBook;
    color: #FEFEFE;
}

.flex-container {
    DISPLAY: FLEX;
    justify-content: space-between;
    width: 100%;
    color: #FFFFFF;
}
.item {
    background-color: black;
    width: 5%;
    margin: 2px;
}
.item-activite {
    background-color: black;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.item-gestion {
    background-color: #4D4D4D;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.item-creation {
    background-color: #40A9F5;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.item-cont {
    background-color: #362984;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.item-quot {
    background-color: #662D91;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.item-temps {
    background-color: #42A246;
    width: 15%;
    margin: 2px;
    text-align: center;
}
.font-black {
    color: #000000;
}
.font-grn {
    color: #42A246;
}
.container {
    display: flex;
    justify-content: center;
    align-content: center;
}
#activite, #gestion, #creation, #contenu, #quotidien, #temps {
    display: none;
}
#activite.active  ,#gestion.active , #creation.active  ,#contenu.active  ,#quotidien.active , #temps.active{
    display: block;
}
a {
    text-decoration: none;
    color: #FFFFFF;
}
.btn_activite, .btn_gestion, .btn_creation, .btn_contenu, .btn_quotidien, .btn_temps {
    transition: .2s ease;
    -webkit-transition: .2s ease;
    cursor: pointer;
}
.btn_activite:hover, .btn_gestion:hover, .btn_creation:hover , .btn_contenu:hover, .btn_quotidien:hover, .btn_temps:hover{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Menu ACCES CBR -->
<div class="flex-container">
   <div class="item">
   </div>
   <div class="item-activite">
      <a class="btn_activite" href="#" >
         Activité Assurance Q+
      </a>
   </div>
   <div class="item-gestion">
      <a href="#" class="btn_gestion">
         Gestion Assurance Q+
      </a>
   </div>
   <div class="item-creation">
      <a class="btn_creation" href="#" >
         Recherche - création
      </a>
   </div>
   <div class="item-cont">
      <a href="#" class="btn_contenu">
         Recherche - Contenu
      </a>
   </div>
   <div class="item-quot">
      <a class="btn_quotidien" href="#">
         Quotidien | Hebdo +
      </a>
   </div>
   <div class="item-temps">
      <a href="#" class="btn_temps">
         Temps | Chrono
      </a>
   </div>
   <div class="item">
   </div>
</div>
<!-- Page Activite -->
<div class="container active" id="activite">
   <h1>
      Activité Assurance Q+
   </h1>
</div>
<div class="container" id="gestion">
   <h1>
      Gestion Assurance Q+
   </h1>
</div>

<!-- Page Recherche creation -->
<div class="container" id="creation">
   <h1>
      Recherche Creation
   </h1>
</div>

<!-- Page Aventuriers -->
<div class="container" id="contenu">
   <h1>
      Recherche Contenu
   </h1>
</div>

<!-- Page Équipiers -->
<div class="container" id="quotidien">
   <h1>
      Quotidien | Hebdo +
   </h1>
</div>

<!-- Page Supporters -->
<div class="container" id="temps">
   <h1>
      Temps | Chrono
   </h1>
</div>

推荐阅读