javascript - 在基于链接单击的主窗口中显示不同的div

我正在尝试找出一种方法来获取div，该方法基于用户在演出中单击的链接。
默认情况下，主窗口中有文本。当用户单击7个链接之一时，关联的隐藏div将显示隐藏默认文本。然后根据所点击的链接，它将显示相关的div并隐藏前一个div。
什么是达到此目的的好方法？我是div和java的新手，我不知道该怎么做。我知道我需要CSS和javascript，但是我尝试的每件事都不起作用

这是主窗口中的隐藏div。

<div id="hiddendiv">
<id="link1">hidden link 1</div>
<id="link2">hidden link 2</div>
<id="link3">hidden link 3</div>
<id="link4">hidden link 4</div>
<id="link5">hidden link 5</div>
<id="link6">hidden link 6</div>
<id="link7">hidden link 7</div>
</div>

这些是在主窗口中单击显示div的链接。

<div id="carlist1"><a href="#" rel="link1">link1</a></div>

<div id="carlist1"><a href="#" rel="link2">link2</a></div>

<div id="carlist1"><a href="#" rel="link3">link3</a></div>

<div id="carlist1"><a href="#" rel="link4">link4</a></div>

<div id="carlist1"><a href="#" rel="link5">link5</a></div>

<div id="carlist1"><a href="#" rel="link6">link6</a></div>

<div id="carlist1"><a href="#" rel="link7">link7</a></div>

请原谅图片，不要让我以新朋友的身份上传图片。希望我发布时的格式保持不变。
http://oi41.tinypic.com/2ymvps2(dot)jpg
+++++++++++++++++++++++++++++++++++++++
+ ------------------------------------------------- ------------ +
+-标题---------------------------------------------- ----- +
+-说明---------------------------------------------- +
+ ***************************************************** ***** +
+ ---------主窗口/主窗口-||| --link1 ------- +
+ ---------主窗口/主窗口-||| --link2 ------- +
+ ---------主窗口/主窗口-||| --link3 ------- +
+ ---------主窗口/主窗口-||| --link4 ------- +
+ ---------主窗口/主窗口-||| --link5 ------- +
+ ---------主窗口/主窗口-||| --link6 ------- +
+ ---------主窗口/主窗口-||| --link7 ------- +
+ ---------主窗口/主窗口-||| ----------------- +
+ ----------------------------------------------- || | --------------- +
+ ----------------------------------------------- || | --------------- +
++++++++++++++++++++++++++++++++++++++

最佳答案

这是您的操作方式：http://jsfiddle.net/n4hqF/

<div class="hiddendiv">
   <div class="hide" id="link1">hidden link 1</div>
   <div class="hide" id="link2">hidden link 2</div>
   <div class="hide" id="link3">hidden link 3</div>
   <div class="hide" id="link4">hidden link 4</div>
   <div class="hide" id="link5">hidden link 5</div>
   <div class="hide" id="link6">hidden link 6</div>
   <div class="hide" id="link7">hidden link 7</div>
</div>
<div class="carlist1"><a href="#" rel="link1">link1</a></div>

 <div class="carlist1"><a href="#" rel="link2">link2</a></div>

<div class="carlist1"><a href="#" rel="link3">link3</a></div>

<div class="carlist1"><a href="#" rel="link4">link4</a></div>

 <div class="carlist1"><a href="#" rel="link5">link5</a></div>

<div class="carlist1"><a href="#" rel="link6">link6</a></div>

 <div class="carlist1"><a href="#" rel="link7">link7</a></div>

JS

我猜你已经有了jQuery库

$('a').click(function(){
   $('.hide').hide();
   $('.carlist1').show();
   var rel = $(this).attr('rel');
    $(this).closest( "div" ).hide();
   $("#" + rel).show();
});

的CSS

.hide{
  display:none;
 }

关于javascript - 在基于链接单击的主窗口中显示不同的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21002313/