Как я могу показать div, а затем скрыть другие div при нажатии на ссылку? - PullRequest
Новая
       10

Как я могу показать div, а затем скрыть другие div при нажатии на ссылку?

1 голос
/ 21 декабря 2010

Я сейчас пытаюсь скрыть шесть дел, показывая только один из дел.Я пробовал JavaScript и в jQuery, но, похоже, ничего не работает!Нажмите здесь , чтобы перейти на сайт.

Я хотел бы знать, связано ли это с моим CSS, jQuery или HTML.Или есть более простой способ сделать это?

HTML: 

<div id="resourceLinks">
  <a href="#" name="resource" id="resource1">General&nbsp;Information</a><br />
  <a href="#" name="resource" id="resource2">Automatic&nbsp;401(k)</a><br />
  <a href="#" name="resource" id="resource3">Consumer&nbsp;Fraud</a><br />
  <a href="#" name="resource" id="resource4">Direct&nbsp;Deposit</a><br />
  <a href="#" name="resource" id="resource5">Diversity</a><br />
  <a href="#" name="resource" id="resource6">Women</a><br />
  <a href="#" name="resource" id="resource7">Young&nbsp;Adults&nbsp;(20s&nbsp;-&nbsp;40s)</a>
  </div>

<div id="resource1></div>
<div id="resource2></div>
<div id="resource3></div>
<div id="resource4></div>
<div id="resource5></div>
<div id="resource6></div>
<div id="resource7></div>

CSS: 

#resource1, #resource2, #resource3, #resource4, #resource5, #resource6, #resource7 {
    position: absolute;
    margin-left: 400px;
    margin-top: -10px;
    width: 300px;
    padding-bottom: 120px;
}

#resourceLinks {
    position: fixed;
    margin-left: -450px;
    z-index: 3;
    margin-top: 180px;
    font-size: 16px;
}

jQuery: 

$(document).ready(function(){ 

  $('#resourceLinks a').click(function (selected) { 

    var getName = $(this).attr("id"); 
    var projectImages = $(this).attr("name");

    $(function() {      
      $(".resource").hide().removeClass("current");
      $("#" + projectImages ).show("normal").addClass("current");
    }); 
  }); 
});

Ответы [ 4 ]

2 голосов
/ 21 декабря 2010

Как насчет этого 

<div id="resourceLinks">   
    <a href="#" name="resource" id="resource1">General&nbsp;Information</a><br />   
    <a href="#" name="resource" id="resource2">Automatic&nbsp;401(k)</a><br />   
    <a href="#" name="resource" id="resource3">Consumer&nbsp;Fraud</a><br />   
    <a href="#" name="resource" id="resource4">Direct&nbsp;Deposit</a><br />   
    <a href="#" name="resource" id="resource5">Diversity</a><br />   
    <a href="#" name="resource" id="resource6">Women</a><br />   
    <a href="#" name="resource" id="resource7">Young&nbsp;Adults&nbsp;(20s&nbsp;-&nbsp;40s)</a>   
</div>  

<div class="resource" id="resource1_info"></div> 
<div class="resource" id="resource2_info"></div> 
<div class="resource" id="resource3_info"></div> 
<div class="resource" id="resource4_info"></div> 
<div class="resource" id="resource5_info"></div> 
<div class="resource" id="resource6_info"></div> 
<div class="resource" id="resource7_info"></div> 


$(document).ready(function(){
     $("div.resource:gt(0)").hide();  // to hide all div except for the first one
     $('#resourceLinks a').click(function(selected) {
        var getID = $(this).attr("id");      
        var projectImages = $(this).attr("name");      

        $("div.resource").hide();       
        $("#" + getID + "_info" ).show();    
    });  
});
0 голосов
/ 21 декабря 2010

Использование classNames 

<div id="resourceLinks">
      <a href="#" class="resource1">General Information</a><br />
      <a href="#" class="resource2">Automatic</a><br />
      <a href="#" class="resource3">Consumer Fraud</a><br />
      <a href="#" class="resource4">Direct Deposit</a><br />
      <a href="#" class="resource5">Diversity</a><br />
      <a href="#" class="resource6">Women</a><br />
      <a href="#" class="resource7">Young</a>
</div>
<div class="resources">
    <div id="resource1" class="current"></div>
    <div id="resource2"></div>
    <div id="resource3"></div>
    <div id="resource4"></div>
    <div id="resource5"></div>
    <div id="resource6"></div>
    <div id="resource7"></div>
</div>

JQuery: 

$(document).ready(function(){
     $('#resourceLinks a').click(function() {
        $('div.resources div').hide().removeClass('current');       
        $("#" + $(this).attr('className')).show().addClass('current');
    });  
});
0 голосов
/ 21 декабря 2010

Я думаю, что вы пытаетесь достичь эффекта аккордеона. Посмотрите здесь:

http://jquery.bassistance.de/accordion/demo/

Его и существующий плагин jQuery.

0 голосов
/ 21 декабря 2010

Дано: 

<div id="resourceLinks">
  <a href="#" data-child="resource1">General&nbsp;Information</a><br />
  <a href="#" data-child="resource2">Automatic&nbsp;401(k)</a><br />
  <a href="#" data-child="resource3">Consumer&nbsp;Fraud</a><br />
  <a href="#" data-child="resource4">Direct&nbsp;Deposit</a><br />
  <a href="#" data-child="resource5">Diversity</a><br />
  <a href="#" data-child="resource6">Women</a><br />
  <a href="#" data-child="resource7">Young&nbsp;Adults&nbsp;(20s&nbsp;-&nbsp;40s)</a>
  </div>

<div class="resource" id="resource1">1</div>
<div class="resource" id="resource2">2</div>
<div class="resource" id="resource3">3</div>
<div class="resource" id="resource4">4</div>
<div class="resource" id="resource5">5</div>
<div class="resource" id="resource6">6</div>
<div class="resource" id="resource7">7</div>

Вы можете: 

$(function() {
    var $resLinks = $('#resourceLinks a'),
        $res = $('.resource');

    // Hide all but first
    $res.not(':first').hide();
    $resLinks.first().addClass('current');

    $resLinks.click(function() {
        var $elm = $(this),
            childId = $elm.data('child');

        // Hide all (only one is visible, though)
        $res.hide();

        // Reset and set .current class on links
        $resLinks.removeClass('current');
        $elm.addClass('current');

        // Show related
        $('#' + childId).show();

        return false;
    });
});

Обновление № 1: Код проверен .

Обновление № 2: Отображение первого при инициализации .

...