javascript - 根据链接点击在主窗口中显示不同的 div

Question

我正在尝试找出一种方法来根据用户在节目中单击的链接获取 div。默认情况下，主窗口中有文本。当用户单击 7 个链接之一时，关联的隐藏 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
+++++++++++++++++++++++++++++++++++++++
+------------------------------------------------ ----------+
+--header-------------------------------------------- -----+
+--描述-------------------------------------------- +
+******************************************************+
+--------主窗口/主窗口--|||--link1------+
+--------主窗口/主窗口--|||--link2------+
+--------主窗口/主窗口--|||--link3------+
+--------主窗口/主窗口--|||--link4------+
+--------主窗口/主窗口--|||--link5------+
+--------主窗口/主窗口--|||--link6------+
+--------主窗口/主窗口--|||--link7------+
+--------主窗口/主窗口--|||--------------+
+--------------------------------------------|| |----------------+
+--------------------------------------------|| |----------------+
++++++++++++++++++++++++++++++++++++++

Answer 1

这就是您的操作方式: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;
 }