Question

我正在尝试找出一个允许我隐藏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都应该隐藏。

我希望他有意义，并提前感谢你的帮助

的Dom

Answer 1

尝试

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

小提琴here

Answer 2

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

$(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（）函数的文档

Answer 3

向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();
});

DEMO： http://jsfiddle.net/LYKVG/

Answer 4

$("body").on("click","a", function(){
    var divtoshowselector = $(this).attr("href");
    $(divtoshowselector).show().siblings().hide();
})

Answer 5

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();
});

Answer 6

我为你设置了一个小提琴，请查看：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();
});

希望这可以帮助您，扩展到您自己的需求。并且只是为了完整性：不要在ids / classnames中使用-。

由锚点的href选择隐藏

6 个答案:

HTML

CSS

的javascript / jquery的