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>

请原谅我不会让我作为新人上传图片。当我发帖时，LEts希望格式保持不变。 http://oi41.tinypic.com/2ymvps2(dot)jpg
+++++++++++++++++++++++++++++++++++++
+ ------------------------------------------------- ------------ +
+ - 头---------------------------------------------- ----- +
+ - 说明---------------------------------------------- +
+的 * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** +
+ ---------主窗口/主窗口 - ||| --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;
 }

Answer 2

您错过了div标签名称，ID必须是唯一的，而是使用类。有改进的地方，但我保留了你的标记并制作了jsFiddle here。

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>

和Jquery：

$( "#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
} );

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

2 个答案: