Question

请参阅此JSFiddle

如果我们鼠标进入任何Span（Span1或Span2或Span3）并且在mouseleave之后消失，则会出现蓝条。当点击任何跨度（Span1或Span2或Span3）时，蓝色条将坚持相应的跨度。我想要的是在点击一个Span之后，我们将鼠标悬停在另一个Span上，蓝色条必须在单击的Span上消失并出现在悬停Span上。

供参考： See

这里有链接（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');
    })
});

演示：Fiddle

另一个没有$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');
    })
});

演示：Fiddle

Answer 2

Fiddle

  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

我只是在跨度的点击事件中删除了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 4

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

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

Demo

Answer 5

请你查看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');
          });   
      }
    });    
});

Answer 6

当我进行这种编码时，我总是定义一个变量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

支持

这是DEMO

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>

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

正确添加和删除类

6 个答案: