点击时jQuery显示内容最初隐藏

时间：2016-01-03 11:42:13

标签： javascript jquery html

我正在使用一个简单的jQuery函数来显示/更改div内容，具体取决于点击的链接..

＆＃13;
＆＃13; 
jQuery(document).ready(function() {
  jQuery('.showSingle').on('click', function () {
    jQuery(this).addClass('selected').siblings().removeClass('selected');
    jQuery('.targetDiv').hide();
    jQuery('#div' + jQuery(this).data('target')).show();
  });
});
＆＃13; 
.col-md-4{width:200px;background:red;clear:both;margin-bottom:10px;}
.p_content{clear:both;margin-top:300px;}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="p_link">
    <a class="showSingle" data-target="1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis orci id nulla aliquet fermentum. Suspendisse ultrices nulla id magna cursus blandit.
    </a>
  </div>
</div>
<div class="col-md-4 p_link">
  <a class="showSingle" data-target="2">
    Sed feugiat fringilla lacus, quis aliquam turpis cursus eu. In dignissim ultrices tellus in convallis. Sed euismod tellus vel lorem
  </a>
</div>
<div class="col-md-4 p_link">
  <a class="showSingle" data-target="3">
    suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris
  </a>
</div>
<div class="col-md-4">
  <div class="p_link">
    <a class="showSingle" data-target="4">
      ique sodales mi mi quis leo. Aliquam at eros vitae sem accumsan maximus. In non sapien faucibus, accumsan nisl eget, convallis 
    </a>
  </div>
</div>

<div class="col-md-4 p_link">
  <a class="showSingle" data-target="5">
    vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus.
  </a>
</div>
<div class="col-md-4 p_link">
  <a class="showSingle" data-target="6">
    fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis
  </a>
</div>
<div class="container p_content">
  <div id="div1" class="targetDiv">
    posuere dapibus. In blandit, tortor quis laoreet lobortis, sem est auctor eros, ut vulputate augue felis nec massa. Pellentesque sagittis mi ac leo dignissim, sed semper augue hendrerit. Quisque scelerisque ante quis ullamcorper placerat. Cras in porta turpis. Proin turpis mi, posuere vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit am
  </div>
  <div id="div2" class="targetDiv">
    idunt ante, eget pulvinar magna malesuada id. Morbi posuere libero sed ante tempor faucibus. Fusce non nulla nunc. Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et 
  </div>
  <div id="div3" class="targetDiv">
    erisque erat vel vehicula. In varius at massa id molestie. Donec nec nisi vel justo auctor laoreet. Ut commodo velit vitae magna faucibus elementum. Cras ultrices auctor risus, scelerisque aliquet nisi tincidunt id. Integer quis dapibus nibh. Praesent mauris eros, vestibulum at felis a, luctus laoreet tellus.
  </div>
  <div id="div4" class="targetDiv">
    e vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit amet sodales urna
  </div>
  <div id="div5" class="targetDiv">
    gnissim ultrices tellus in convallis. Sed euismod tellus vel lorem suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris. Aenean quis maximus ex. Maecenas congue tellus ac nunc sodales pellentesque.
  </div>
  <div id="div6" class="targetDiv">
    Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis nisi id cursus. Nunc ac turpis sem. In pellentesque rhoncus suscipit.
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

http://jsfiddle.net/W4Km8/7939/

除了两件事之外，一切正常：

  1. 首次加载时，会显示所有内容，直到其中一个选项被点击为止。
  2. 我想这样做，以便当点击其中一个链接时，页面会跳转到内容的位置。

    3. 有人能指出我正确的方向来实现这两件事吗？

2 个答案:

答案 0 :(得分：1)

  1. 您只需要在 css 中使用display:none;隐藏这些元素。
  2. 我的解决方案是在网址中添加hash，让浏览器关注滚动。

    3. jQuery(document).ready(function() {
  jQuery('.showSingle').on('click', function () {
    jQuery(this).addClass('selected').siblings().removeClass('selected');
    jQuery('.targetDiv').hide();
    var selector = '#div' + jQuery(this).data('target');
    jQuery(selector).show();
    location.hash = selector;
  });
});
    .col-md-4{width:200px;background:red;clear:both;margin-bottom:10px;}
.p_content{clear:both;margin-top:300px;}

/* add this */
.targetDiv {
  display:none;  
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
  <div class="p_link">
    <a class="showSingle" data-target="1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis orci id nulla aliquet fermentum. Suspendisse ultrices nulla id magna cursus blandit.
    </a>
  </div>
</div>
<div class="col-md-4 p_link">
  <a class="showSingle" data-target="2">
    Sed feugiat fringilla lacus, quis aliquam turpis cursus eu. In dignissim ultrices tellus in convallis. Sed euismod tellus vel lorem
  </a>
</div>
<div class="col-md-4 p_link">
  <a class="showSingle" data-target="3">
    suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris
  </a>
</div>
<div class="col-md-4">
  <div class="p_link">
    <a class="showSingle" data-target="4">
      ique sodales mi mi quis leo. Aliquam at eros vitae sem accumsan maximus. In non sapien faucibus, accumsan nisl eget, convallis 
    </a>
  </div>
</div>

<div class="col-md-4 p_link">
  <a class="showSingle" data-target="5">
    vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus.
  </a>
</div>
<div class="col-md-4 p_link">
  <a class="showSingle" data-target="6">
    fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis
  </a>
</div>
<div class="container p_content">
  <div id="div1" class="targetDiv">
    posuere dapibus. In blandit, tortor quis laoreet lobortis, sem est auctor eros, ut vulputate augue felis nec massa. Pellentesque sagittis mi ac leo dignissim, sed semper augue hendrerit. Quisque scelerisque ante quis ullamcorper placerat. Cras in porta turpis. Proin turpis mi, posuere vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit am
  </div>
  <div id="div2" class="targetDiv">
    idunt ante, eget pulvinar magna malesuada id. Morbi posuere libero sed ante tempor faucibus. Fusce non nulla nunc. Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et 
  </div>
  <div id="div3" class="targetDiv">
    erisque erat vel vehicula. In varius at massa id molestie. Donec nec nisi vel justo auctor laoreet. Ut commodo velit vitae magna faucibus elementum. Cras ultrices auctor risus, scelerisque aliquet nisi tincidunt id. Integer quis dapibus nibh. Praesent mauris eros, vestibulum at felis a, luctus laoreet tellus.
  </div>
  <div id="div4" class="targetDiv">
    e vehicula mi vitae, fermentum efficitur nisi. Vestibulum id tortor lacus. Phasellus convallis consequat rhoncus. Fusce sed facilisis risus. Suspendisse vel mi auctor, pulvinar nibh auctor, consequat massa. Phasellus vel laoreet sem, sit amet sodales urna
  </div>
  <div id="div5" class="targetDiv">
    gnissim ultrices tellus in convallis. Sed euismod tellus vel lorem suscipit dignissim. Mauris ut velit sit amet enim sollicitudin molestie nec quis mauris. Aenean quis maximus ex. Maecenas congue tellus ac nunc sodales pellentesque.
  </div>
  <div id="div6" class="targetDiv">
    Vestibulum lacinia leo arcu, ut efficitur nibh sodales sit amet. Maecenas non efficitur lectus, sit amet cursus sem. In nibh metus, sagittis eget ex id, fringilla tempor odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce at porta orci. Nulla tempus convallis nisi id cursus. Nunc ac turpis sem. In pellentesque rhoncus suscipit.
  </div>
</div>

答案 1 :(得分：1)

你可以在页面加载时使用jquery按类名隐藏所有元素，或者你可以只使用css     显示：无;

相关问题
最新问题