如何使用 JQuery 更改 div 的顺序

【问题标题】：How to change order of div's using JQuery如何使用 JQuery 更改 div 的顺序
【发布时间】：2021-05-25 03:34:21
【问题描述】： 

$(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，其余的都向右移动。

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

【问题讨论】：

  • 我这里不会说法语！！我建议您使用逻辑来调整 ids/个人类的名称，因为这可以简化和减少您的编码。jquery 选择器可以对全局 html 元素进行操作。

标签： html jquery flexbox


【解决方案1】：

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

唯一的变化是 jQuery 处理。所有当前的处理都被注释掉，替换为document.ready 函数末尾的短代码 sn-p。看看那里的 cmets。

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

【讨论】：

    【解决方案2】：

    我建议你修改id的名称，简化所有代码并使用insertafter()：（这里我只是在id名称前添加x_..

    $(document).ready(function() {

  var selector = $('a[class^=btn_]');

  selector.on('click', function() {
    let clasn = $(this).attr('class').split('_')[1];
    $('div[id^=x_]').removeClass('active');
    $('#x_' + clasn).addClass('active');

    var move = $(this).closest('div');
    move.insertAfter($('.item').first());

  });

});
    @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;
}

#x_activite,
#x_gestion,
#x_creation,
#x_contenu,
#x_quotidien,
#x_temps {
  display: none;
}

#x_activite.active,
#x_gestion.active,
#x_creation.active,
#x_contenu.active,
#x_quotidien.active,
#x_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="x_activite">
  <h1>
    Activité Assurance Q+
  </h1>
</div>
<div class="container" id="x_gestion">
  <h1>
    Gestion Assurance Q+
  </h1>
</div>

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

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

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

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

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2014-09-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-02-11
      • 1970-01-01
      • 2015-08-28
      • 2014-10-31
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode