Question

我有网页，可在此处找到：https://jsfiddle.net/saTfR/51/

当用户点击“投资组合”时，如何创建显示在页面上的框？我还将在此框中添加PNG图像。用户将点击图像，它将变大。每个图像（一旦点击）将具有左箭头和右箭头，用户可以在其中导航图像。

HTML：

values.put(DBHelper.CARID, listItem.get(i).toString());

CSS：

 <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>

JavaScript的：

* {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;}

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>

如何创建一个单击菜单项时出现的框？

1 个答案: