Question

我有一个布局设置，我的链接作为图像，其中4个320x320px。它们在悬停时有不透明度变化。我现在要做的是，如果可能的话，点击该框将扩展到具有新内容的预定大小。如果没有，则导航到包含新内容的同一页面上的隐藏div。希望这是有道理的。

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/styles.css" rel="stylesheet" type="text/css">
<title>Adam Sackfield's Portfolio</title>

<script src="scripts/jquery-2.0.3.js"></script>

<script type="text/javascript">
            $(document).ready(function() {
                $("nav a").hover(function() {
                    $(this).stop().animate({
                        opacity: 1
                    }, 300);
                    }, function() {
                    $(this).stop().animate({
                        opacity: 0.3
                    }, 300);
                });
            });
</script>

</head>

<body>

<div id="wrapper">
<header>

    <div id="logo">

        <img src="images/logoarrows.jpg">

    </div><!-- Logo Close -->

    <div id="social">

    </div><!-- Social Close -->

</header>

<nav>
    <a href="#" class="yellow"><p class="yelinner">Home</p></a>
    <a href="#" class="pink"><p class="pinkinner">About Me</p></a>
    <a href="#" class="purple"><p class="purpinner">Portfolio</p></a>
    <a href="#" class="green"><p class="greinner">Contact Me</p></a>     
</nav>

<section>

    <article>

    </article>

    <aside>

    </aside>

</section>

<footer>

</footer>

</div><!-- Wrapper Close -->

</body>
</html>

CSS

*           {
              margin: 0;
              padding: 0;
                                    }


#wrapper    {   
                width: 800px;
                margin-left: auto;
                margin-right: auto;
                background-color: #000000;
                                    }

header      {
                width:1000px;
                height: 220px;


                                    }

#wrapper header #logo {
                width: 400px;
                padding-left: 200px;


                                    }

body        {
              background: #111111;
              color: #FFF;
              font-family:’Open Sans’, sans-serif;
              font-weight: 300;
              font-size: 16pt;
                                    }
a           {
              color: #FFF;
              text-decoration: none;
                                    }

nav         {
              width: 800px;
              margin-top: 60px;
              padding-left: 75px;

                                    }

#wrapper nav a  {
              width: 320px;
              line-height: 320px;             
              display: inline-block;
              margin: 4px;                    
              opacity: 0.3;
              text-align: center;

                                }
.yellow     {       background-image: url(../images/tiles/yellow.jpg);
                    background-repeat:no-repeat;
                      }


.purple     {       background-image: url(../images/tiles/purple.jpg);
                    background-repeat:no-repeat;
                                                   }


.pink       {       background-image: url(../images/tiles/pink.jpg);
                    background-repeat:no-repeat;
                    }

.green      {       background-image: url(../images/tiles/green.jpg);
                    background-repeat:no-repeat; }

Answer 1

您可以使用onClick事件来调用javascript或jQuery函数，然后让该函数根据需要更改css或html

<div onClick="yourFunction()"></div>


<script>

function yourFunction(){

//this will change your background color on click

//JS
document.getElementById("divID").style.background ="blue";

//jQuery 
$(".className").css("background-color","yellow");

}


</script>

用于JS参考 http://www.w3schools.com/js/js_htmldom_css.asp

for jQuery http://www.w3schools.com/jquery/jquery_css.asp

Answer 2

您可以使用点击事件来增加宽度并向其中添加内容

jQuery('body').on('click','nav a',function(){
    jQuery(this).animate({width: "200px"}, 500).append("any-content");
})

你的动机仍然不清楚，希望这会有所帮助。

Answer 3

<style>
.dropdownstuff {
    width: 100%;
    height: 100%;
    z-index: 10;
    position:absolute;
    left: 0px;
    top: 0px;
    display:none;
}
.Showstuff {
    display:block !important; 
}
</style>
<script>
$("nav a").onClick(function() {
    n = $(this).attr('class');
    $('.dropdownstuff.Showstuff').removeClass('Showstuff');
    $('.dropdownstuff.'+n).addClass('Showstuff'); 
});

$("a.dropdownhider").onClick(function() {
    $('.dropdownstuff.Showstuff').removeClass('Showstuff');
});
</script>

然后你的下拉列表下方或里面有一些div：

<a href="#" class="yellow"><p class="yelinner">Home</p></a>        
<a href="#" class="pink"><p class="pinkinner">About Me</p></a>
<a href="#" class="purple"><p class="purpinner">Portfolio</p></a>
<a href="#" class="green"><p class="greinner">Contact Me</p></a> 

<div class="dropdownstuff yellow"><a href="#" class="dropdownhider">Hide this</a></div>
<div class="dropdownstuff pink"><a href="#" class="dropdownhider">Hide this</a></div>
<div class="dropdownstuff purple"><a href="#" class="dropdownhider">Hide this</a></div>
<div class="dropdownstuff green"><a href="#" class="dropdownhider">Hide this</a></div>

点击你的链接后，它会使用它的类来确定要取消隐藏的div。

编辑：现在div应该填满屏幕。单击链接时，将通过该类显示div内容。虽然不确定你想要什么样的动画。

如何调整div的大小并移动它或滑动到隐藏的div？

3 个答案: