Question

我正在投资组合网站上工作，在我的主页上，我试图设置它，点击导航链接和内容框。我的div框的CSS工作，我可以用JQuery隐藏它们。问题是当我点击链接时，框不会出现。我认为它与我的链接href属性有关，但我不确定。我包含了与此问题有关的代码部分。任何帮助，将不胜感激。

HTML

<div id = "HomeNav">
    <div id ="Navabsolute">
        <ul>
            <li><a id = "skills" href= "#Skills" style=padding-right:190px;><img src="~/Content/Images/snowflake.png" style=width:91px;height:91px;vertical-align:middle;>Skills</a></li>
            <li><a id = "works" href= "#Resume" style=padding-right:190px;><img src="~/Content/Images/snowflake.png" style=width:91px;height:91px;vertical-align:middle;>Resume</a></li>
            <li><a id = "education" href= "#Education"><img src="~/Content/Images/snowflake.png" style=width:91px;height:91px;vertical-align:middle;>Work and Education</a></li>
        </ul>
    </div>

</div>
<div id="Skills"></div>
<div id="Resume"></div>
<div id="Education"></div

使用Javascript / JQuery的

$(document).ready(function(){
    $("#Skills").hide();
    $("#Resume").hide();
    $("#Education").hide();

    $("#skills").click(function(){
        $("#Skills").show();
        $("#Resume").hide();
        $("#Education").hide();
    });

    $("#works").click(function(){
        $("#Skills").hide();
        $("#Resume").show();
        $("#Education").hide();
    });

    $("#education").click(function(){
        $("#Skills").hide();
        $("#Resume").hide();
        $("#Education").show();
    });
});

CSS

#HomeNav {
     position: relative;
     width: 1200px;
     height: 750px;


}
#Navabsolute {
    position: absolute;
    top: 30px;
    left:110px;
}

#Skills {
    width: 300px;
    height: 300px;
    background-color: red;
}

#Resume {
    width: 600px;
    height: 600px;
    background-color: blue;
}

#Education {
    width: 300px;
    height: 300px;
    background-color: green;
}

Answer 1

嗨，看起来你的div框的id有点困惑。我已经更改了你的div id并运行Jquery它看起来对我有用。看看下面的代码可能有所帮助。

＆LT; div id =“a”＆gt;技能＆lt; / div＆gt;

＆LT; div id =“b”＆gt;作品＆lt; / div＆gt;

＆LT; div id =“c”＆gt;教育＆lt; / div＆gt;

<code><script>
    $(document).ready(function(){
          $("#a").hide();
          $("#b").hide();
          $("#c").hide();

    $("#skills").click(function(){
            $("#a").show();
            $("#b").hide();
            $("#c").hide();
        });

    $("#works").click(function(){
            $("#a").hide();
            $("#b").show();
            $("#c").hide();
        });

        $("#education").click(function(){
            $("#a").hide();
            $("#b").hide();
            $("#c").show();
        });
    });
</script></code>

点击链接

1 个答案: