javascript - 正确添加和删除类

Question

看到这个JSFiddle

如果我们在任何 Span（Span1 或 Span2 或 Span3）上鼠标进入，则会出现蓝条，并在鼠标离开后消失。当点击任何 Span（Span1 或 Span2 或 Span3）时，蓝色条将粘在各自的 Span 上。我想要的是在单击一个 Span 之后，我们将鼠标悬停在另一个 Span 上，蓝色条必须在单击的 Span 上消失并出现在悬停 Span 上。

供参考： 见

在链接中（home、chi siamo、serizi、portfolio、contatti）如果按下“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');
    });

});

Answer 1

尝试

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

演示：小提琴

Answer 2

小提琴

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

        });

Answer 3

您可以将您的activedom 元素放入内存并在 mouseEnter 和 mouseLeave 上切换它：

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

演示

Answer 4

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

其中包含选定的 id/index...

所以如果我点击 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，因为这种方式仅受现代 browsers.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>

如果你有问题，就问吧

Answer 5

我只是在跨度的单击事件期间删​​除了 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/

干杯！！！

Answer 6

你能检查一下这个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');
          });   
      }
    });    
});