0

我正在寻找使用 ID 和哈希值创建一个简单的显示/隐藏 div 设置。如果单击具有哈希值的链接，则会显示与哈希具有相同 ID 的 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

4

5 回答 5

4

你可以试试这个：

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

小提琴：

http://jsfiddle.net/FsCHV/

于 2013-09-13T09:36:21.593 回答
2

像这样（如果您可以在生成每个内容 div 时为它们添加一个类）：

EDIT => 默认显示第一个 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();
});
于 2013-09-13T09:45:11.467 回答
1

这会做..

$(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/

你可以让自己成为一个关闭按钮。

于 2013-09-13T09:42:48.187 回答
1

尝试这个。

$(.menu li a).click(function(){
var hrefValue = $(this).attr("href");
$(hrefValue).toggle();
});
于 2013-09-13T09:38:23.123 回答
1 
$(function(){
  $('.menu').find('a').on('click', function(){
    var dest = $(this).attr('href');
    $(dest).slideToggle();
  });
});
于 2013-09-13T09:39:12.377 回答