javascript - 如何创建一个出现在点击菜单项上的框？

Question

我有网页可以在这里找到:https://jsfiddle.net/saTfR/51/

当用户单击“投资组合”时，如何创建一个出现在页面上的框？我还将在此框中添加 PNG 图像。用户将单击图像，它会变大。每张图片(点击后)都会有左右箭头，用户可以在其中浏览图片。

HTML:

 <p class="text">text</p>        
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">text</p>      


<div class="logo">
    <img id="logo" src="logo2.png" alt="Logo"> 
</div>
</html>

<ul id="menu">

        <li><a href=#ABOUT>About me</a></li>
        <li><a href=#PORTFOLIO>Portfolio</a></li>
        <li><a href=#CONTACT>Contact me</a></li>
</ul>

CSS:

* {font-family: Lucida Console; }

.text{
    color:white;
    z-index:999;
    position:fixed;
    bottom: 50%;
    right: 5px;
    left:30%;
    font-size:25px;}

#menu{
color:white;
position: fixed;
top:50%;
left:3px;
}

#logo {
    position: fixed; 
    right: 2px; 
    top: 5px; 
    z-index: 10;
}

#map {
   background-attachment: fixed;}

JavaScript:

$(".text").hide().fadeIn(2000);
var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
    if(mywindow.scrollTop() > pos)
    {
        $('.text').fadeOut();  
    }
    else
    {
        $('.text').fadeIn();
    }
    pos = mywindow.scrollTop();
 });

Answer 1

There is many different ways to do this but I think the most popular would be either using JavaScript or jQuery.

//Have an element (the box) you want to show
<div id="portfolio_box"></div>

//The CSS for the box (make sure you have the display set to none)
<style>
    #portfolio_box{
        width: 100px;
        height: 100px;
        background: white;

        display: none;
    }
</style>

//Call the function
<li><a href="#PORTFOLIO" onclick="portfolio();">About me</a></li>


//The function in JavaScript
<script type="text/javascript">

    function portfolio(){
        document.getElementById("portfolio").style.display = "block";
    }

</script>

// Or jQuery (if it's jquery you want to have the element you want clicked to have a class or ID)

//The class/id

 <li><a href=#PORTFOLIO class="b_portfolio">Portfolio</a></li>

//jQuery
<script>

    $(document).ready(function(){
        $('.b_portfolio').on('click', function(){
            $('#portfolio_box').css({display: 'block'});
        })
    });

</script>