私は大きな問題を抱えています、そして私はこれを行う方法がわかりません、私は同様の解決策を見つけましたが、正確な解決策ではありません、そして私を助けることができる誰かがそこにいることを願っています、お願いします。
何よりもまず、作業ページを作成し、サムネイルを4列に表示するだけです。これは非常に簡単です...サムネイルをクリックすると、コンテンツ全体が消えて、上の完全な詳細に置き換えられます。クリックされた特定のサムネイル（つまり、thumbnail1をクリックすると、thumbnail1 content divが表示されます）...バックリンクを使用して、ユーザーをサムネイルに戻します...。
私の仕事は別のページに移動することではなく、そのページにとどまるということです...それで、これがより簡単なオプションだったので、なぜ私は助けを求めているのですか...
私は本当に次のhttp://www.charliegentle.co.uk/を達成しようとしています。ウェブデザインをクリックしてからサムネイルをクリックすると、後の効果を見ることができます。
私が見つけた最も近い例は以下のとおりです。唯一の問題は、メニューバーシステムが必要ないことです。メニューバーをサムネイルに変更した場合でも、サムネイルは画面に表示されたままになります。これは私が望んでいることではありません。 。
助けてください...ここに使用できるコードがありますhttp://jsfiddle.net/buScL/21/
HTML
<div id="wrapper">
<ul id="controlls">
<li><a href="#" id="one" class="dealer">Dealer</a></li>
<li><a href="#" id="two" class="advertise">Advertise</a></li>
<li><a href="#" id="three" class="social">Social Media</a></li>
<li><a href="#" id="four" class="need">Need</a></li>
</ul>
<div id="slider">
<div id="dealer">
<p>If you click on this paragraph
you'll see it just fade away.
</p>
</div>
<div id="advertise">
<p>If you click on this paragraph
you'll see it just fade away.
</p>
</div>
<div id="social">
<p>If you click on this paragraph
you'll see it just fade away.
</p>
</div>
<div id="need">
<p>If you click on this paragraph
you'll see it just fade away.
</p>
</div>
</div>
</div>
と
Javascript
$("#controlls li a").click(function(e) {
e.preventDefault();
var id = $(this).attr('class');
$('#slider div:visible').fadeOut(500, function() {
$('div#' + id).fadeIn();
})
});
およびcss
p { font-size:150%; cursor:pointer; }
#wrapper{
width: 700px;
height: 400px;
background: #a5a5a5;
margin: 100px auto 0 auto;
}
#slider{
width: 450px;
overflow: hidden;
}
#dealer{
float: left;
margin: 0 auto;
width: 450px;
height: 200px;
background: pink;
}
#advertise{
float: left;
display: none;
margin: 0 auto;
width: 450px;
height: 200px;
background: lime;
}
#social{
float: left;
display: none;
margin: 0 auto;
width: 450px;
height: 200px;
background: purple;
}
#need{
float: left;
display: none;
margin: 0 auto;
width: 450px;
height: 200px;
background: yellow;
}
ul#controlls{
padding: 10px 0;
height: 60px;
}
ul#controlls li{
display: inline;
padding: 5px 10px;
}