如何创建在单击菜单项时显示的框

How to create a box which appears upon clicking menu item?

本文关键字：菜单项 显示 单击 何创建 创建      更新时间：2023-09-26

我有一个网页，可以在这里找到: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();
 });

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>
相关文章：