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

我试图找到一种方法，根据用户在节目中单击的链接获取div。 默认情况下，主窗口中有文本。当用户单击7个链接之一时，关联的隐藏div将显示隐藏默认文本。然后根据单击的链接显示相关div并隐藏上一个div。 实现这一点的好方法是什么？我刚接触divs和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 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>

隐藏链接1
隐藏链接2
隐藏链接3
隐藏链接4
隐藏链接5
隐藏链接6
隐藏链接7

以下是单击主窗口中显示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 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>

请原谅这张粗糙的照片，它不会让我以新人的身份上传照片。希望我发帖时格式保持不变。
+++++++++++++++++++++++++++++++++++++
+-------------------------------------------------------------+
+--页眉--------------------------------------------+
+--说明--------------------------------------------+
+***************************************************************+
+---------主窗口/主窗口--| |--link1-----+
+---------主窗口/主窗口--| |--link2-----+
+---------主窗口/主窗口--| |--link3-----+
+---------主窗口/主窗口--| |--link4-----+
+---------主窗口/主窗口--| |--link5-----+
+---------主窗口/主窗口--| |--link6-----+
+---------主窗口/主窗口--| |--link7-----+
+---------主窗口/主窗口--| | |--+
+-----------------------------------------------|||---------------+
+-----------------------------------------------|||---------------+
++++++++++++++++++++++++++++++++++++

这是您的操作方式：

CSS

.hide{
  display:none;
 }

---

您错过了div标记名，ID必须是唯一的，请改用类。有改进的地方，但我保留了你的标记并做了一个修改

HTML：

<div id="hiddendiv">
    <div id="link1">hidden link 1</div>
    <div id="link2">hidden link 2</div>
    <div id="link3">hidden link 3</div>
    <div id="link4">hidden link 4</div>
    <div id="link5">hidden link 5</div>
    <div id="link6">hidden link 6</div>
    <div 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>

---

$（'div'）.hide（）$（'div#id'）.show（）

可以显示需要隐藏/显示的文本所在的HTML。

id的

总是唯一的<代码>carlist1删除

$( "#hiddendiv div" ).hide(); // hide all the div not supposed to be visible

$( '.carlist1' ).on( 'click', function () {
    var hiddenLinkId = "#" + $( this ).children( "a" ).attr( "rel" ); 

    $( hiddenLinkId ).show(); // this will show the hidden link corresponding to the rel data
    $( this ).hide(); // if you want to hide the clicked link
} );