Question

所以我有一个菜单栏，它基本上是一个div内的一组块。我想编写一个jquery脚本，当您将鼠标悬停在特定的块上时，该脚本会更改菜单中周围2个块的类。我想我会做一个switch语句来检查$（this）id，然后更改周围的类。一旦我没有再次徘徊，我也想改变课程（就像原来我正在徘徊一样。

为此添加小提琴有意义

$(document).ready(function() {
    $(".kontakt").hover(
       function() {
       $(".kontakt").width("30%");
       $(".kontakt").css("margin-left", "35%");
       
       $(".kontakt").append("<a>mobitel:031-535-919</a>");
       $(".kontakt").append("<br><a>stacionarni tel.:01-3664-515</a><br>");
       $(".kontakt").append("<br><a>email:</a><a href='mailto:sustersic_miha@hotmail.com'>sustersic_miha@hotmail.com</a><br>");
       $(".kontakt").append("<br><a>Visoko 19<br>1292 Ig<br>Slovenija</a>");
       },  
        function() {
       $(".kontakt").empty();
       $(".kontakt").width("10%");
       $(".kontakt").css("margin-left", "45%");
       $(".kontakt").append("<div class='kontaktlabelbox'><div class='kontaktlabel'>Kontakt</div></div>");
        });
    $(".menubutton").hover(
        function() {
        $(this).addClass("activatedmenubutton");
        switch(true){
            case $(this.attr('id') === "iz"):
            $("#1").addClass("activatedmenubutton");
            $("#2").addCLass("activatedmenubutton");
            break
        }
        },
        function (){
        $(this).removeClass("activatedmenubutton");    
        });
});

body{
    margin:0;
    font-family:verdana;
    
    background-image:url("images/background_test.jpg");
    background-size:cover;    
}
.topmenu {
    width:90%;
    margin:auto;
    
    background-color:#3366ff;
    
    border-radius:0px 0px 10px 10px;
    text-align:center;
    
    opacity:0.7;
}
.menubutton {
    margin-top:5px;
    margin-bottom:5px;
    display:inline-block;
    background-color:#ffffff;
    font-weight:bolder;
    
    padding:2px;
}
.activatedmenubutton {
    background-color:#cccccc;
}
.menubreak {
    background-color:#ffffff;
    display:inline-block;
    
    padding:2px;
}

.kontaktlabel {
   font-weight:bolder;
}   
.kontaktlabelbox {
    background-color:#ffffff;
    margin-top:6px;
    margin-bottom:5px;
}
.content{    
}
.kontakt{
    position:absolute;
    bottom:0;
    width:10%;
    margin-left:45%;
    
    background-color:#3366ff;
    
    border-radius: 5px 5px 0px 0px;
    text-align:center;
    
    opacity:0.7;
}

<!DOCTYPE html>

<html>
    <head>
        <title>Iščem delo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link type="text/css" rel="stylesheet" href="unicornsandrainbows.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="magic.js"></script>
    </head>
    <body>
        <div class="topmenu">
            <a class="menubreak" id="1">|</a
            ><a class="menubutton" id="iz">Izobrazba</a
            ><a class="menubreak" id="2">|</a
            ><a class="menubutton" id="zn">Znanja in Kompetence</a
            ><a class="menubreak" id="3">|</a
            ><a class="menubutton" id="izk">Izkušnje</a
            ><a class="menubreak" id="4">|</a
            ><a class="menubutton" id="pč">Prosti Čas</a
            ><a class="menubreak" id="5">|</a
            ><a class="menubutton" id="fo">Fotografije</a
            ><a class="menubreak" id="6">|</a>
        </div>
        <div class="content">            
        </div>
            <div class="kontakt">
                <div class="kontaktlabelbox">
                    <div class="kontaktlabel">Kontakt</div>
                </div>
            </div>
    </body>
</html>

所以基本上我希望＃1和＃2在我将鼠标悬停在#zn上时点亮＃2，＃2和＃3点亮...等等...我也希望他们回到他们的在我不再徘徊在按钮上之后的原始课程。

感谢您的帮助

Answer 1

试试这个。你甚至不需要转换。

$(".menubutton").hover( function() {
    $(".topmenu a").removeClass("activatedmenubutton");
    $(this).addClass("activatedmenubutton");
    $(this).prev().addClass("activatedmenubutton");
    $(this).next().addClass("activatedmenubutton");

});

Answer 2

尝试......

case $(this.attr('id') === "iz"):

...到......

case ($(this).attr('id') === "iz"):

......缺少括号。

Answer 3

switch语句的键应该是元素的属性，每个case应该是一个潜在的值。除语法错误外，您当前的代码实际上是使用if语句。试试这个：

switch (this.id) {
    case "iz":
        $("#1, #2").addClass("activatedmenubutton");
        break;
}

应该注意的是，switch只有一个案例是多余的，您也可以使用if语句。

编写一个检查$（this）#id的开关

3 个答案: