正确添加和删除类

Add and remove a class correctly

本文关键字：删除 添加      更新时间：2023-09-26

参见此JSFiddle

如果我们在任何跨度（Span1 或 Span2 或 Span3）上鼠标输入并在鼠标离开后消失，则会出现蓝条。当单击任何跨度（跨度1或跨度2或跨度3）时，蓝色条将粘在相应的跨度上。我想要的是，在一个跨度被单击后，我们将鼠标悬停在另一个跨度上，蓝色条必须在单击的跨度上消失，并出现在悬停的跨度上。

供参考：看

这里在链接 （ 家， 奇西亚莫， 塞里兹 ， 投资组合， 康塔蒂）如果按下"chi siamo"链接，顶部会出现一个蓝色条，当将鼠标悬停在另一个链接上时，蓝色条会在"chi siamo"上消失，并出现在悬停在哪个链接上。如果没有点击其他链接，蓝色条将重新出现在"chi siamo"上。我想要这个没有蓝色水平滚动条的东西。

.CSS 

    div.demo {
        display:table;
        min-width:100%;
    }
    div.demo div {
        display:table-cell;
        text-align:center;
        width: 33%;
    }
    .under {
        width:100px;
        height:2px;
        background-color:blue;
        margin:0px auto;
        display:block;
    }
    .active {
        width:100px;
        height:2px;
        background-color:blue;
        margin:0px auto;
        display:block;
    }

.HTML

  <div class="demo">
        <div id='span1'>Span 1</div>
        <div id='span2'>Span 2</div>
        <div id='span3'>Span 3</div>
    </div>
    <div class="demo">
        <div><span id='Span1'>&nbsp;</span></div>
        <div><span id='Span2'>&nbsp;</span></div>
        <div><span id='Span3'>&nbsp;</span></div>
    </div>

.JS

$(document).ready(function(){
    $('#span1').mouseenter(function(){
        $('#Span1').addClass('under');
    });
    $('#span1').click(function(){
        $('#Span1').addClass('active');
        $('#Span2').removeClass('active');
        $('#Span3').removeClass('active');
    });
    $('#span2').mouseenter(function(){
        $('#Span2').addClass('under');
    });
    $('#span2').click(function(){
        $('#Span2').addClass('active');
        $('#Span1').removeClass('active');
        $('#Span3').removeClass('active');
    });    
    $('#span3').mouseenter(function(){
        $('#Span3').addClass('under');
    });
    $('#span3').click(function(){
        $('#Span3').addClass('active');
        $('#Span1').removeClass('active');
        $('#Span2').removeClass('active');
    });
    $('#span1').mouseleave(function(){
        $('#Span1').removeClass('under');
    });
    $('#span2').mouseleave(function(){
        $('#Span2').removeClass('under');
    });
    $('#span3').mouseleave(function(){
        $('#Span3').removeClass('under');
    });
});

尝试

<div class="demo">
    <div id='span1' class="span-h">Span 1</div>
    <div id='span2' class="span-h">Span 2</div>
    <div id='span3' class="span-h">Span 3</div>
</div>
<div class="demo">
    <div><span id='Span1' class="span-b">&nbsp;</span></div>
    <div><span id='Span2' class="span-b">&nbsp;</span></div>
    <div><span id='Span3' class="span-b">&nbsp;</span></div>
</div>

然后

$(document).ready(function(){
    var $fixed, $spanb = $('.span-b');
    var $spans = $('.span-h').hover(function(){
        $spanb.filter('.under').removeClass('under');
        $spanb.eq($(this).index()).addClass('under');
    }, function(){
        $spanb.eq($(this).index()).removeClass('under');
        if($fixed){
            $fixed.addClass('under');
        }
    }).click(function(){
        $fixed = $spanb.eq($(this).index()).addClass('under');
    })
});

演示：小提琴

另一个没有$fixed变量的变体，而是使用类

$(document).ready(function () {
    var $spanb = $('.span-b');
    var $spanh = $('.span-h').hover(function () {
        $spanb.filter('.under').removeClass('under');
        $spanb.eq($(this).index()).addClass('under');
    }, function () {
        $spanb.eq($(this).index()).removeClass('under');
        $spanb.filter('.fixed').addClass('under');
    }).click(function () {
        $spanb.filter('.fixed').removeClass('fixed');
        $spanb.eq($(this).index()).addClass('under').addClass('fixed');
    })
});

演示：小提琴

小提琴

  var prev;    
    $(document).ready(function(){
            $('#span1').mouseenter(function(){
                $('#Span1').addClass('under');
                 $(prev).removeClass('under');
                 $('#Span2').removeClass('active');
                $('#Span3').removeClass('active');
            });
            $('#span1').click(function(){
                prev="#Span1";
                $('#Span1').addClass('active');
                $('#Span2').removeClass('active');
                $('#Span3').removeClass('active');
            });
            $('#span2').mouseenter(function(){
               $(prev).removeClass('under');
                $('#Span2').addClass('under');
                            $('#Span1').removeClass('active');
                $('#Span3').removeClass('active');
            });
            $('#span2').click(function(){
                 prev="#Span2";
                $('#Span2').addClass('active');
                $('#Span1').removeClass('active');
                $('#Span3').removeClass('active');
            });    
            $('#span3').mouseenter(function(){
                $(prev).removeClass('under');
                $('#Span3').addClass('under');
                            $('#Span2').removeClass('active');
                $('#Span1').removeClass('active');
            });
            $('#span3').click(function(){
                prev="#Span3";
                $('#Span3').addClass('active');
                $('#Span1').removeClass('active');
                $('#Span2').removeClass('active');
            });
            $('#span1').mouseleave(function(){
                $('#Span1').removeClass('under');
                 $(prev).addClass('under');
            });
            $('#span2').mouseleave(function(){
                $('#Span2').removeClass('under');
                $(prev).addClass('under');
            });
            $('#span3').mouseleave(function(){
                $('#Span3').removeClass('under');
                $(prev).addClass('under');
            });
        });

我只是在跨度的单击事件中删除了 CSS 类。检查这个小提琴。它的工作。

$(document).ready(function(){
    $('#span1').mouseenter(function(){
        $('#Span2').removeClass('active');
        $('#Span3').removeClass('active');
        $('#Span1').addClass('under');
    });
    $('#span1').click(function(){
        $('#Span1').addClass('active');
        $('#Span2').removeClass('active');
        $('#Span3').removeClass('active');
    });
    $('#span2').mouseenter(function(){
        $('#Span2').addClass('under');
        $('#Span1').removeClass('active');
        $('#Span3').removeClass('active');
    });
    $('#span2').click(function(){
        $('#Span2').addClass('active');
        $('#Span1').removeClass('active');
        $('#Span3').removeClass('active');
    });    
    $('#span3').mouseenter(function(){
        $('#Span3').addClass('under');
        $('#Span2').removeClass('active');
        $('#Span3').removeClass('active');
    });
    $('#span3').click(function(){
        $('#Span3').addClass('active');
        $('#Span1').removeClass('active');
        $('#Span2').removeClass('active');
    });
    $('#span1').mouseleave(function(){
        $('#Span1').removeClass('under');
    });
    $('#span2').mouseleave(function(){
        $('#Span2').removeClass('under');
    });
    $('#span3').mouseleave(function(){
        $('#Span3').removeClass('under');
    });
});

http://jsfiddle.net/JWSxQ/

干杯！！！

你能检查一下这个jsfiddle

$(document).ready(function(){
    $('.link').hover(function(){
        $(".link").each(function(){
            $('.link').removeClass('under');
        }); 
        $(this).addClass('under');
    });
    $('.link').click(function(){
        $(".link").each(function(){
            $('.link').removeClass('active');
        }); 
        $(this).addClass('active');
        $(this).addClass('under');       
    });
  $('.link').mouseout(function() {
      var cnt =0;
      $(".under").each(function(){
          $(this).removeClass('under');
            cnt++;
       });
      if(cnt==1) {
          $(".active").each(function(){
            $(this).addClass('under');
          });   
      }
    });    
});

您可以将 active dom 元素放在内存中，并在 mouseEnter 和 mouseLeave 上切换它：

function showUnder(){
        under.addClass('active');
    }
    function hideUnder(){
        under = $('.active');
        under.removeClass('active');
    }

演示

当我进行这种类型的编码时，我总是定义一个变量selected。

其中包含选定的 ID/索引...

因此，如果我单击所选的 span1 包含"span1"。

这样做我可以有一个这样的函数：

var selected=false;
function select(e){
 if(selected){
  document.getElementById(selected).classList.remove('active');
 }
 e.target.classList.add('active');
 selected=e.target.id;
}

悬停的事情是通过简单的CSS完成的。

我用普通的JavaScript编写了它。这是添加和删除类的实际正确方法 

element.classList.add();
element.classList.remove();
element.classList.toggle();

但是如果你愿意，你可以很容易地把它转换为jQuery，因为这种方式只支持现代浏览器.webkit+css3

这是演示

http://jsfiddle.net/f7epx/

这是完整的代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    div.demo{
        display:table;
        min-width:100%;
    }
    div.demo>div {
        display:table-cell;
        text-align:center;
        width: 33%;
    }
    div.demo>div:hover>div>div{
        width:50%;
        height:2px;
        background-color:grey;
        margin:0px auto;
        display:block;
    }
    div.demo>div.active>div>div{
        width:50%;
        height:2px;
        background-color:blue;
        margin:0px auto;
        display:block;
    }
    div.demo>div>div>div{
        width:0%;
        height:2px;
        background-color:grey;
        margin:0px auto;
        display:block;
        -webkit-transition:all 700ms ease;
        -moz-transition:all 700ms ease;
        -ms-transition:all 700ms ease;
    }
</style>
<script>
var selected=false;
function select(e){
 if(selected){
  document.getElementById(selected).classList.remove('active');
 }
 document.getElementById(e.target.id).classList.add('active');
 selected=e.target.id;
}
window.onload=function(){
 document.getElementById('x').addEventListener('click',select,false);
}
</script>
</head>
<body>
 <div id="x" class="demo">
  <div id="span1">Uno<div><div></div></div></div>
  <div id="span2">Due<div><div></div></div></div>
  <div id="span3">Tre<div><div></div></div></div>
 </div>
</body>
</html>

如果您有任何问题，请询问

相关文章：