Javascript 隐藏由定位点选择的对象'；s href

我试图找出一个函数，它允许我隐藏

div

，并在单击引用链接时显示它们

很难解释，但以下是我想要的：

<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

试试看

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

拉小提琴试试

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

---

Fiddle

您可以使用类似的工具（未经测试，因此可能需要调整）：

$（document）.ready（函数（）{//在dom ready上激发
$（“a”）。单击（函数（e）{//将单击处理程序分配给所有标记
$（“.classForYourDivs”）.hide（）；//隐藏所有div（将类放在要隐藏的div上）
var元素=$（e.target）；
var href=element.attr（“href”）；//获取属性
$（href）.show（）；//显示相关的
返回false；//停止链接的默认单击行为很重要
});
});

---

顺便说一下，你应该考虑使用除了HREF以外的东西来存储这些信息…查看jquery data（）函数的文档

您可以使用类似的方法（未经测试，因此可能需要调整）：

$（document）.ready（函数（）{//在dom ready上激发
$（“a”）。单击（函数（e）{//将单击处理程序分配给所有标记
$（“.classForYourDivs”）.hide（）；//隐藏所有div（将类放在要隐藏的div上）
var元素=$（e.target）；
var href=element.attr（“href”）；//获取属性
$（href）.show（）；//显示相关的
返回false；//停止链接的默认单击行为很重要
});
});

---

顺便说一下，你应该考虑使用除了HREF以外的东西来存储这些信息…查看jquery data（）函数的文档

将类添加到

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

然后尝试下面的js代码

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

---

演示：向

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

然后尝试下面的js代码

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

演示：

html javascript/jquery

html javascript/jquery

---

我为你准备了一把小提琴，看看：

希望这能帮助你，扩展到你自己的需要。为了完整起见：不要在ids/类名中使用

-

。

---

​

我为您准备了一把小提琴，请查看：

希望这能帮助你，扩展到你自己的需要。为了完整起见：不要在ids/类名中使用

-

。

---

​

只要没有其他同级div就可以工作，这在所提供的标记中是不清楚的-可能在div中包含一个属性选择器会更具选择性？您不应该执行

。替换（“#”）

，只要没有其他同级div，就需要为workworks下一行中的选择器设置

。

，从提供的标记中不清楚哪一点-可能在div中包含一个属性选择器会更具选择性？您不应该执行

。替换（“#”）

，您需要

#

，以便下一行中的选择器工作

<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>​

div {display: none;}

$("a").click( function(e) {
    e.preventDefault();    
    var elId = $(this).attr('href');
    $('div').hide();
    $(elId).show();
});​

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