1

我试图找出一个功能，divs如果单击引用链接，我可以隐藏和显示它们。

很难解释，但这是我要找的：

<ul>
   <li><a href="#id-1">Link 1</a></li>
   <li class="active"><a href="#id-2">Link 1</a></li>
   <li><a href="#id-3">Link 1</a></li>
<ul>
<div id="id-1">Some content</div> // Hidden
<div id="id-2">Some content</div> //  This should only show in document
<div id="id-3">Some content</div> // hidden

每当单击其他锚点时，其他锚点divs应隐藏。

我希望他说得通，并提前感谢您的帮助

多姆

4

6 回答 6

1

尝试

$("a").click( function( ) {
    var elId = $(this).attr("href");
    $(elId).show().siblings("div[id^=id-]").hide();
});

在这里提琴

于 2012-11-28T21:09:40.613 回答
1

您可以使用这样的东西（未经测试，因此可能需要调整）：

$(document).ready(function() {              //fires on dom ready

    $("a").click(function(e) {              //assign click handler to all <a> tags

        $(".classForYourDivs").hide();      //hide all divs (put class on ones you want to hide)

        var element = $(e.target);
        var href = element.attr("href");    //get the attribute

        $(href).show();                     //show the relevent one
        return false;                       //important to stop default click behavior of link
    });

});

顺便说一句，您应该考虑使用 href 以外的东西来存储此信息...查看 jquery data() 函数的文档

于 2012-11-28T21:14:23.803 回答
1

ul向和 中添加一个类divs。

<ul class="myUL">
   <li><a href="#id-1">Link 1</a></li>
   <li class="active"><a href="#id-2">Link 1</a></li>
   <li><a href="#id-3">Link 1</a></li>
<ul>
<div id="id-1" class="myDivs">Some content</div> // Hidden
<div id="id-2" class="myDivs">Some content</div> //  This should only show in document
<div id="id-3" class="myDivs">Some content</div> // hidden

然后在 CSS 中，

.myDivs { display: none; }

并尝试下面的js代码，

var $myDivs = $('.myDivs');
$('.myUL a').on('click', function () {
    $myDivs.hide();
    $($(this).attr('href')).show();
});

演示：http: //jsfiddle.net/LYKVG/

于 2012-11-28T21:15:19.040 回答
1 
$("body").on("click","a", function(){
    var divtoshowselector = $(this).attr("href");
    $(divtoshowselector).show().siblings().hide();
})
于 2012-11-28T21:15:34.493 回答
1

http://jsfiddle.net/

html

<ul>
   <li><a href="#id-1">Link 1</a></li>
   <li class="active"><a href="#id-2">Link 2</a></li>
   <li><a href="#id-3">Link 3</a></li>
<ul>
<div id="id-1">Some content 1</div> 
<div id="id-2">Some content 2</div>
<div id="id-3">Some content 3</div>​

css

div {display: none;}

javascript/jquery

$("a").click( function(e) {
    e.preventDefault();    
    var elId = $(this).attr('href');
    $('div').hide();
    $(elId).show();
});​
于 2012-11-28T21:18:15.220 回答
1

我已经为你设置了一个小提琴，请查看：http: //jsfiddle.net/UsGag/

function currentActive()
{
    return $("li.active a").attr("href");
}

$("div:not(" + currentActive() + ")").hide();

$("li a").on("click", function()
{
    //hide old active div
    $("div" + currentActive()).hide();
    $("li").removeClass("active");

    //activate new div
    $(this).parent().addClass("active");    
    $("div" + currentActive()).show();
});

希望这对您有所帮助，扩展到您自己的需求。并且只是为了完整性：不要使用-in ids / classnames。​</p>

于 2012-11-28T21:19:58.860 回答