0

我将如何做到这一点？我想要多个链接...如果单击一个，它将向右滑动打开的 div，如果单击另一个链接，则第一个链接 div 将关闭，另一个链接 div 将打开，在每个 div 中显示不同的内容对于每个链接...这可能吗？

我是 JavaScript 新手。我正在尝试制作一个divID 为 的showcase，单击其中的链接后向右滑动map_menu。如果再次单击相同的链接，div幻灯片将向左关闭。

我什至不知道从哪里开始，但知道我需要 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

你可以使用 jQuery 来做一些像这样的事情

Javascript：

showcase = false;
$('#map_menu a').click(function () {
    $('.showcase-active').hide('slow').removeClass('showcase-active');
    $('.' + $(this).data('showcase')).show('slow').addClass('showcase-active');
});

HTML：

<div id="map_menu">
     <h2>Map List</h2>
 <a data-showcase="showcase1" href="#">• Link</a>
 <a data-showcase="showcase2" href="#">• Link</a>
 <a data-showcase="showcase3" href="#">• Link</a>
 <a data-showcase="showcase4" href="#">• Link</a>
</div>

<div class="showcase showcase1">some showcase content1</div>
<div class="showcase showcase2">some showcase content2</div>
<div class="showcase showcase3">some showcase content3</div>
<div class="showcase showcase4">some showcase content4</div>

工作示例 [这里] http://jsfiddle.net/dW5ty/1/） - 你将不得不摆弄动画等。查看 jQuery切换文档

于 2013-08-27T11:38:52.453 回答
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 回答