Question

我正在寻找使用ID和哈希值创建一个简单的show / hide div设置。如果单击具有哈希值的链接，则会显示与哈希值相同的div。我知道那里有一些工具，但如果可能的话，我更愿意使用jQuery / JS。

需要注意的是，所有哈希值和ID都是根据页面标题从CMS中动态提取的，然后对其进行清理 - 因此我无法对jQuery中的任何ID或哈希进行硬编码。

这是我的设置：

<div class="menu">
  <ul>
    <li><a href="#aquatic-health">Aquatic Health</a></li> 
    <li><a href="#environment">Environment</a></li> 
  </ul>
</div>

<div id="aquatic-health">
  <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p> <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p>
</div>
<div id="environment">
  <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p> <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p>
</div>

许多人提前感谢， [R

Answer 1

你可以试试这个：

$('.menu a').on('click', function(){
    $( $(this).attr('href') ).toggle(); // prop() can be used
});

小提琴：

http://jsfiddle.net/FsCHV/

Answer 2

这样的事情（如果你可以在每个内容div生成时添加一个类）：

EDIT =＆gt;默认显示第一个div

http://jsfiddle.net/eNTtN/3/

HTML：

<div class="menu">


<ul>
    <li><a href="#aquatic-health">Aquatic Health</a></li> 
    <li><a href="#environment">Environment</a></li> 
  </ul>
</div>

<div class="hidden" id="aquatic-health">
  <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.&nbsp;Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p> <p>Lorem ipsum dolor sit amet, vel vide elaboraret persequeris at, clita vitae eirmod in eos, eros nostrud apeirian ea per.</p>
</div>
<div class="hidden" id="environment">
  <p>Blabla</p>
</div>

CSS

.hidden{
    display: none;
}

JS

$(document).ready(function(){
    $(".menu li a").click(function(){
        $(".hidden").hide();
        $($(this).attr("href")).show();
    });
    /* Show the first div by default */
    $(".hidden:first").show();
});

Answer 3

试试这个。

$(.menu li a).click(function(){
var hrefValue = $(this).attr("href");
$(hrefValue).toggle();
});

Answer 4

$(function(){
  $('.menu').find('a').on('click', function(){
    var dest = $(this).attr('href');
    $(dest).slideToggle();
  });
});

Answer 5

这样做..

$(document).ready(function() {

    $('.menu a').click(function() {
        var id = $(this).attr('href');
        $(id).css('display', 'block');
    });

});

或者您可以使用切换

$(document).ready(function() {

        $('.menu a').click(function() {
            var id = $(this).attr('href');
            $(id).toggle();
        });

    });

http://jsfiddle.net/FZTmH/

你可以自己做一个关闭按钮。

使用ID和哈希显示/隐藏div

5 个答案: