0

リンクを 320x320px の 4 つの画像として設定したレイアウトがあります。ホバーすると不透明度が変化します。私が今やろうとしていることは、ボックスをクリックすると、可能であれば新しいコンテンツで事前に決定されたサイズに拡大されます。そうでない場合は、新しいコンテンツを含む同じページの非表示の 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; }
4

3 に答える 3

0

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

jQuery の場合http://www.w3schools.com/jquery/jquery_css.asp

于 2013-08-14T13:27:56.460 に答える
0

クリックイベントで使用して、幅を広げてコンテンツを追加できます

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

あなたの動機はまだ不明です。これが役に立てば幸いです。

于 2013-08-14T13:35:10.750 に答える
0 
<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 コンテンツが表示されます。ただし、アニメーションで何が必要かは正確にはわかりません。

于 2013-08-14T13:41:51.957 に答える