Question

我对这个Jquery事情有点新意。我试图做的是使用链接切换类，其中包含页面的元素。我需要做的是使用一个脚本来调用一个链接的元素，但隐藏与其他链接相关的所有其他元素，这样一个人只能点击一次链接来获取该页面的元素，并拥有其他所有内容隐。我一直在jquery中使用toggleclass函数，但是这需要用户单击一次来激活一个类的元素，但是再次单击以删除它们，然后才能单击另一个链接。

这甚至可能吗？我发现一些javascript看起来像我需要它，但我不明白它实现它。

我更喜欢它是jquery，因为我似乎对它有一个很好的把握，但不是整个javascript。（我通过反复试验教自己所有类型的技巧）

Answer 1

不确定具体情况是什么，但根据您的结构，您可以随时使用.siblings()。

例如，使用以下设置：

<div id="mydiv">
    <p id="p1">Something1</p>
    <p id="p2">Something2</p>
    <p id="p3">Something3</p>
</div>

你的jQuery看起来像是：

$("#p1").show().siblings().hide();

这假设您在CSS中设置了display:hide;。

Answer 2

您可以使用each()来迭代元素。因此，在each()内，只需对元素执行.hide()。

隐藏元素将如下所示：

$('#id).hide();

每份文件is here。

Answer 3

基本和简单的解决方案

示例html：

<ul id="controls">
   <li><button data-value="#a" type="button">show a</button></li>
   <li><button data-value="#b" type="button">show b</button></li>
</ul>

<div id="elements">
   <div id="a" class="element"></div>
   <div id="b" class="element"></div>
</div>

脚本：这将获取控件ID内的所有按钮，并调用一个名为toggleElements的函数，其值分配给按钮的data-value属性。

$(document).ready(function() {
   $('#controls button').click(function() {
      toggleElements($(this).attr('data-value'))
   });
});

toggleElements函数检查目标是否有/有什么东西，如果有，它会隐藏所有元素并显示目标元素。

function toggleElements(target) {
   if (target && $(target).length >0) { 
      $('element').hide(); 
      $(target).show();
   }
}

Answer 4

我喜欢巴特的回答，但我不确定OP在他的问题中试图描述的是什么。 OP，你能给我们一些示例代码来更好地描绘问题图片吗？我想像OP想做这样的事情。

// Your HTML something like...
// Note: They can be any elements, divs, span, whatever, give element an id.

<a id="alpha">Toggle type one</a>
<a id="bravo">Toggle type two</a>

<div class="typeOne"></div>
<div class="typeOne"></div>
<div class="typeTwo"></div>
<div class="typeTwo"></div>

// Your jQuery something like this:

$('#alpha').click(function() {
    $('.typeOne').show();
    $('.typeTwo').hide();
}

$('#bravo').click(function() {
    $('.typeTwo').show();
    $('.typeOne').hide();
}

基本上这会使所有元素最初都可见。当他们点击链接id =“alpha”时，它会显示class =“typeOne”的所有元素，并隐藏class =“typeTwo”的元素。当您点击链接ID =“bravo”时，它会隐藏typeOne并显示typeTwo ...

Answer 5

我在下面创建的最简单的菜单：

// Jquery Code //

    $(document).ready(function (){
        $('ul li', this).click(function (){
            $('#' + $(this).text()).css({display: 'block'}).siblings().hide()
        });
    });

// HTML代码//

    <div id="main">
    <ul>
        <li>Home</li>
        <li>Product</li>
        <li>FAQ</li>
        <li>Contact</li>
    </ul>
    <div id="content">
        <div id="Home">First DIV</div>
        <div id="Product">Second DIV</div>
        <div id="FAQ">Third DIV</div>
        <div id="Contact">Fourth DIV</div>
    </div>
</div>

// CSS //

ul { padding: 0px; margin: 0px; }
li { float: left; width: auto; padding: 5px 50px 5px 50px; background: #999; color: #fff; list-style-type: none;  border: 1px solid #333; }
#content div { border-bottom: 1px solid #000; padding: 5px; clear: both; border-top: 1px solid white; display: none;}
#content div#item4{ border-bottom: 1px solid white;}
#main { border: 1px solid #000; float: left; }

使用Jquery隐藏所有其他类，同时只有一个是活动的

5 个答案: