怎么让被点击的显示到第一的位置（changing-over）的同时保证三角的位置不变，被点击的替换到changing的位置被替换的内容显示到被点击的位置上


                                <div data-sg-type="tab">
                                    <ul class="search-tab-propose">
                                        <li class="search-propose-tab changing-over">宝贝
                                            <i class="site-tab-triangle">
                                                <i class="site-tab-triangle-icon">i>
                                            i>
                                        li>
                                        <li class="search-propose-tab">天猫li>
                                        <li class="search-propose-tab">店铺li>
                                    ul>
                                div>
                                <style>
                                    #j_search [data-sg-type="tab"]{
    position: absolute;
    top: 0;
    left: 0;
    height: 38px;
    overflow: hidden;
    font-size: 13px;
    border-radius: 100px;
    background-color: #fff;
    z-index: 1;
}
#j_search [data-sg-type="tab"]:hover{
    overflow: visible;
    border-radius: 1px;
    border-top-left-radius: 20px;
}
[data-sg-type="tab"] .search-tab-propose:hover{
    border-top-left-radius: 20px;
}
[data-sg-type="tab"] .search-tab-propose{
    position: relative;
    width: 65px;
    background-color: #fff;
}
.search-tab-propose .search-propose-tab{
    width: 65px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: #3c3c3c;
    cursor: pointer;
}
.search-tab-propose .search-propose-tab:first-child{
    color: #3c3c3c !important;
    cursor: default;
}
.site-tab-triangle{
    position: absolute;
    top: 0;
    right: 6px;
    display: block;
    width: 12px;
    height: 6px;
    overflow: hidden;
    margin-top: 18px;
}
.site-tab-triangle-icon{
    display: block;
    width: 12px;
    height: 12px;
    background-image: url(../image/triangle12-12.png);
    background-size: cover;
    margin-top: -6px;
}
.search-tab-propose .search-propose-tab:hover{
    color: #ff5000;
}
                                style>

以下内容部分参考ChatGPT模型：

可以通过JavaScript来实现点击切换位置和内容的效果。具体思路如下：

给每个标签添加一个点击事件监听器，当标签被点击时执行相应的操作。
点击事件中，首先获取当前被点击的标签和其索引值。
将当前标签的class修改为"changing-over"，同时将其它标签的class恢复为默认值。
将当前标签插入到第一个位置，并将其它标签向后移动。
获取当前标签的内容，并将其显示在第一个标签的位置上。

代码实现如下：

HTML部分：

<div data-sg-type="tab">
  <ul class="search-tab-propose">
    <li class="search-propose-tab changing-over" onclick="changeTab(this, 0)">宝贝
      <i class="site-tab-triangle">
        <i class="site-tab-triangle-icon"></i>
      </i>
    </li>
    <li class="search-propose-tab" onclick="changeTab(this, 1)">天猫</li>
    <li class="search-propose-tab" onclick="changeTab(this, 2)">店铺</li>
  </ul>
</div>

JavaScript部分：

function changeTab(tab, index) {
  // 获取所有标签
  var tabs = document.querySelectorAll(".search-propose-tab");
  // 将当前标签的class修改为"changing-over"，同时将其它标签的class恢复为默认值
  for (var i = 0; i < tabs.length; i++) {
    if (i == index) {
      tabs[i].classList.add("changing-over");
    } else {
      tabs[i].classList.remove("changing-over");
    }
  }
  // 将当前标签插入到第一个位置，并将其它标签向后移动
  var parent = tab.parentNode;
  parent.insertBefore(tab, parent.firstChild);
  // 获取当前标签的内容，并将其显示在第一个标签的位置上
  var content = tab.innerHTML;
  var firstTab = parent.querySelector(".search-propose-tab:first-child");
  firstTab.innerHTML = content;
}

CSS部分与原代码相同，不做改动。

如果我的建议对您有帮助、请点击采纳、祝您生活愉快

不知道你这个问题是否已经解决, 如果还没有解决的话:

这个问题的回答你可以参考下: https://ask.csdn.net/questions/214095

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^