Javascript 正确添加和删除类_Javascript_Jquery

Javascript 正确添加和删除类

javascript jquery

Javascript 正确添加和删除类,javascript,jquery,Javascript,Jquery,看到这个了吗如果我们在任何跨距（Span1、Span2或Span3）上进行鼠标移动并在鼠标移动后消失，则会出现蓝色条。当单击任何跨度（Span1、Span2或Span3）时，蓝色条将粘在相应的跨度上。我想要的是，单击一个跨距后，我们将鼠标悬停在另一个跨距上，蓝色条必须在单击的跨距上消失，并出现在悬停跨距上供参考：这里是链接（主页、chi siamo、serizi、公文包、康塔蒂）如果按下“chi-siamo”链接，顶部会出现一个蓝色条，当鼠标悬停在另一个链接上时，“chi-siamo”

看到这个了吗

如果我们在任何跨距（Span1、Span2或Span3）上进行鼠标移动并在鼠标移动后消失，则会出现蓝色条。当单击任何跨度（Span1、Span2或Span3）时，蓝色条将粘在相应的跨度上。我想要的是，单击一个跨距后，我们将鼠标悬停在另一个跨距上，蓝色条必须在单击的跨距上消失，并出现在悬停跨距上

供参考：

这里是链接（主页、chi siamo、serizi、公文包、康塔蒂）如果按下“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;
    }

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

});

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>

试一试

演示：

另一个没有

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

演示：

试试看

演示：

另一个没有

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

演示：

我只是在span的click事件中删除了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');
    });

});

干杯

我只是在span的click事件中删除了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');
    });

});

干杯

您可以将

活动的dom元素放入内存，并将其切换到mouseEnter和mouseLeave：
function showUnder(){
        under.addClass('active');
    }
    function hideUnder(){
        under = $('.active');
        under.removeClass('active');
    }  

您可以将活动的dom元素放入内存中，并将其切换到mouseEnter和mouseLeave：
function showUnder(){
        under.addClass('active');
    }
    function hideUnder(){
        under = $('.active');
        under.removeClass('active');
    }  

你能检查一下吗
你能检查一下这个吗
当我进行这种类型的编码时，我总是定义一个变量选中

其中包含选定的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，因为这种方式只有现代浏览器支持
这是演示

这是完整的代码
<!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>


无标题文件
演示师{
显示：表格；
最小宽度：100%；
}
div.demo>div{
显示：表格单元格；
文本对齐：居中；
宽度：33%；
}
div.demo>div:hover>div>div{
宽度：50%；
高度：2倍；
背景颜色：灰色；
保证金：0px自动；
显示：块；
}
div.demo>div.active>div>div{
宽度：50%；
高度：2倍；
背景颜色：蓝色；
保证金：0px自动；
显示：块；
}
div.demo>div>div>div{
宽度：0%；
高度：2倍；
背景颜色：灰色；
保证金：0px自动；
显示：块；
-webkit过渡：所有700ms轻松；
-moz转换：所有700ms的易用性；
-ms转换：所有700ms轻松；
}
选择的var=false；
功能选择（e）{
如果（选定）{
document.getElementById（选中）.classList.remove（'active'）；
}
document.getElementById（e.target.id）.classList.add（'active'）；
所选=e.target.id；
}
window.onload=function（）{
document.getElementById（'x'）。addEventListener（'click'，select，false）；
}
联合国组织
应得的
特雷

如果您有任何问题，只需询问
当我进行这种类型的编码时，我总是定义一个所选的变量

其中包含选定的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，因为这种方式只有现代浏览器支持
这是演示

这是完整的代码
<!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>


无标题文件
演示师{
显示：表格；
最小宽度：100%；
}
div.demo>div{
显示：表格单元格；
文本对齐：居中；
宽度：33%；
}
div.demo>div:hover>div>div{
宽度：50%；
高度：2倍；
背景颜色：灰色；
保证金：0px自动；
显示：块；
}
div.demo>div.active>div>div{
宽度：50%；
高度：2倍；
背景颜色：蓝色；
保证金：0px自动；
显示：块；
}
div.demo>div>div>div{
宽度：0%；
高度：2倍；
背景颜色：灰色；
保证金：0px自动；
显示：块；
-webkit过渡：所有700ms轻松；
-moz转换：所有700ms的易用性；
-ms转换：所有700ms轻松；
}
选择的var=false；
功能选择（e）{
如果（选定）{
document.getElementById（选中）.classList.remove（'active'）；
}
document.getElementById（e.target.id）.classList.add（'active'）；
所选=e.target.id；
}
window.onload=function（）{
document.getElementById（'x'）。addEventListener（'click'，select，false）；
}
联合国组织
应得的
特雷

如果您有任何问题，只需问一下
当基本CSS：hover
可以做的时候，为什么会有这么多JavaScript？我只是一个初学者，会做的，谢谢hover不能很好地与旧iES配合使用。为什么在基本CSS：hover
可以的情况下使用这么多JavaScript？我只是一个初学者，会这样做的，谢谢hover不适用于旧的IEsNo，这不起作用。单击一个链接，悬停在任何其他链接上，但没有单击任何链接，上一个单击的链接不会高亮显示否，这不起作用。单击一个链接，悬停在任何其他链接上，但没有单击任何链接，上一个单击的链接不会高亮显示否，这不起作用。一旦您单击一个链接，并将鼠标悬停在任何其他链接上而未单击任何链接，则上一个单击的链接不会高亮显示不，这不起作用。一旦您单击一个链接，并将鼠标悬停在任何其他链接上而未单击任何链接，则