0

どうすればこれを達成できますか? 複数のリンクが欲しい... 1 つがクリックされると、div が右にスライドして開き、別のリンクがクリックされると、最初のリンク div が閉じ、他のリンク div が開き、各 div に異なるコンテンツが表示されますリンクごとに...これは可能ですか？

私はJavaScriptが初めてです。内のリンクをクリックすると、divID が である が右にスライドして開くようにしようとしています。同じリンクをもう一度クリックすると、スライドが左側に閉じます。showcasemap_menudiv

どこから始めればよいかわかりませんが、これには JavaScript が必要であることはわかっています。

CSS

#map_menu {
  width: 250px;
  height: 650px;
  background: #222;
  border: 1px solid #000;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
  float: left;
  position: relative;
  top: 16px;
  left: 20px;
  z-index: 2;
}
#map_menu h2 {
  width: 226px;
  height: 20px;
  padding: 10px 0;
  margin: 0 12px;
  border-bottom: 1px solid #444;
  float: left;
  color: #B45F04;
  font: 24px Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
  text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
  filter: progid:DXImageTransform.Microsoft.Shadow(direction=315,strength=2,color=000000);
}
#map_menu a {
  width: 218px;
  height: 20px;
  padding: 3px 12px 8px 20px;
  color: #999;
  float: left;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
  text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
  position: relative;
  top: 5px;
}
#map_menu a:hover {
  background: rgba(204, 204, 204, 0.5);
    -moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
  color: #FFF;
}
#showcase {
  width: 710px;
  height: 300px;
  background: #222;
  border: 1px solid #000;
    -moz-border-radius: 0 12px 12px 0;
    -webkit-border-radius: 0 12px 12px 0;
    border-radius: 0 12px 12px 0;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
  float: left;
  position: relative;
  top: 58px;
  left: 10px;
  z-index: 1;
}

HTML

<div id="map_menu">
    <h2>Map List</h2>
    <a href="#">• Link</a>
    <a href="#">• Link</a>
    <a href="#">• Link</a>
    <a href="#">• Link</a>
</div>
<div id="showcase">
</div>

これは、ピートによって提供された参照を使用してこれまでに取得したものですが、まだ機能していません: http://jsfiddle.net/sej4F/

4

3 に答える 3

1

これを試して

$('a').click(function(){
    $('#showcase').animate({width: 'toggle'});
});
于 2013-08-27T11:39:15.113 に答える
0

このコードをテストできますか.. 

$(document).ready(function(){
        $('#map_menu a').click(function(){
            $('#showcase').toggle();
        });
    });
于 2013-08-27T11:41:37.870 に答える