我已经设置了一个布局，其中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; }
<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内容将通过类出现。不过，不确定你到底想要什么动画。
您可以使用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
用于jQueryhttp://www.w3schools.com/jquery/jquery_css.asp
您可以使用点击事件来增加宽度并将内容添加到中
jQuery('body').on('click','nav a',function(){
jQuery(this).animate({width: "200px"}, 500).append("any-content");
})
你的动机还不清楚，希望这能有所帮助。