在简单的显示/隐藏内容菜单中显示第一个

Question

遵循一个简单的教程here，但我希望列表中的第一个在页面加载时显示 - 然后如果另一个点击消失。我还希望将一个活动类添加到按钮中，如果它正在被查看，我将如何使用 jquery 实现这一点？

Here be the fiddle

HTML

<div id="wrap">
   <ul id="divtoggle">
      <li><a id="togglediv1" href="#">Web Design &amp; Build</a>
      </li>
      <li><a id="togglediv2" href="#">SEM/SEO</a>
      </li>
      <li><a id="togglediv3" href="#">Graphic Design</a>
      </li>
      <li><a id="togglediv4" href="#">User Experience Design</a>
      </li>
      <li><a id="togglediv5" href="#">Brand Strategy</a>
      </li>
      <li><a id="togglediv6" href="#">Digital Prototyping</a>
      </li>
      <li><a id="togglediv7" href="#">Marketing</a>
      </li>
      <li><a id="togglediv8" href="#">Digital Marketing</a>
      </li>
      <li><a id="togglediv9" href="#">Digital Strategy</a>
      </li>
      <li><a id="togglediv10" href="#">Digital Consulting</a>
      </li>
      <li><a id="togglediv11" href="#">Email Marketing</a>
      </li>
      <li><a id="togglediv12" href="#">Pay Per Click</a>
      </li>
      <li><a id="togglediv13" href="#">Advertising</a>
      </li>
      <li><a id="togglediv14" href="#">Data Analysis</a>
      </li>
   </ul>
   <div id="div1" class="content">
      <h3>Web Design &amp; Build</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div2" class="content">
      <h3>SEM/SEO</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div3" class="content">
      <h3>Graphic Design</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div4" class="content">
      <h3>User Experience Design</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div5" class="content">
      <h3>Brand Strategy</h3>
      <p>Your brand has always been important but now, more than ever, it has to be strong enough to be successful across a variety of platforms and a huge range of audiences.</p>
      <p>Our brand strategy consultation service covers everything you need to build and grow an effective and future-proof brand. We are experts in revamping older brands and we have extensive experience with creating ones from the ground up.</p>
      <p>We take a holistic approach to development and work closely with you and your team to identify how to make your brand work for you.</p>
      <p>What your customers want, as well as your market in a broader sense, are all critical factors and help us deliver a strategy which focuses on improving how people interact with your business to drive growth, trust and recognition. To see our branding work, click here.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div6" class="content">
      <h3>Digital Prototyping</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div7" class="content">
      <h3>Marketing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div8" class="content">
      <h3>Digital Marketing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div9" class="content">
      <h3>Digital Strategy</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div10" class="content">
      <h3>Digital Consulting</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div11" class="content">
      <h3>Email Marketing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div12" class="content">
      <h3>Pay Per Click</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div13" class="content">
      <h3>Advertising</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
   <div id="div14" class="content">
      <h3>Data Analysis</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
      <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
      <p>Nullam facilisis nibh nec lacinia eleifend. Sed diam mi, tempus vel feugiat ac, venenatis elementum magna. Suspendisse iaculis viverra odio ut dignissim. Nam rhoncus congue bibendum. Maecenas eget metus</p>
      <p>accumsan facilisis. Nam scelerisque auctor mauris, volutpat lobortis tellus molestie et. Ut commodo volutpat venenatis. Donec luctus commodo scelerisque. Pellentesque odio libero, adipiscing et urna blandit, gravida hendrerit sem.</p>
      <div class="dots"><span>...</span>
      </div>
   </div>
</div>

CSS

#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11,
#div12, #div13, #div14 {
    display: none;
}

.togglediv1 #div1, .togglediv1 #div2, .togglediv1 #div3, .togglediv1 #div4,
.togglediv1 #div5, .togglediv1 #div6, .togglediv1 #div7, .togglediv1 #div8,
.togglediv1 #div9, .togglediv1 #div10, .togglediv1 #div11, .togglediv1 #div12,
.togglediv1 #div13, .togglediv1 #div14 {
    display: block;
}

脚本

$("#divtoggle").delegate("a", "click", function (e) {
  var toggled = ($(this).prop("id"));
  $("div#wrap").prop("class", toggled);
});

Answer 1

我会做一些细微的改变，让自己的生活更轻松。对于您的按钮...进行更改，以便将 href 中的正确 ID 作为锚点。 例如：

<li><a id="togglediv1" href="#div1">Web Design &amp; Build</a></li>

然后我会稍微简化一下你的 jquery……这个怎么样（未经测试）：

$(document).ready(function() {

    // On page load hide all divs except first...

    $('.content:not(:first)').hide();

    $('#divtoggle a').click(function(e) {
        $('.content').hide(); // Hide all
        $('.active').removeClass('active');
        var toShow = $(this).attr('href');      
        $(toShow).show();
        $(this).addClass('active');
        e.preventDefault();
    });

});

您还可以通过在 Javascript 中执行所有操作来避免在 css 中出现所有 display:none / display: 块。

这样，如果有人禁用了 javascript，它仍应与显示的所有项目一起工作，并在单击按钮时向下锚定。

Answer 2

我自己的建议如下：

$("#divtoggle").delegate("a", "click", function (e) {
    // don't use jQuery to get the id
    var toggled = this.id;
    $("div#wrap").prop("class", toggled);

    // remove the 'active' class-name from the previously-active element:
    $('.active').removeClass('active');

    // add the active class to the clicked element:
    $(this).addClass('active');
// then we find 'a' elements,
// select only the first,
// and trigger the click event on that element (invoking the above click-handling)
}).find('a').first().click();

JS Fiddle demo.

参考资料：

• addClass()。
• click()。
• find()。
• first()。
• removeClass()。

Answer 3

使用当前的编码，我建议这样做：

jsFiddle example

$("#divtoggle a").click(function(){
    $("#wrap").attr("class", $(this).attr('id'));
    $('.active').removeClass('active');
    $(this).addClass('active');
});

---

或者，这是另一种方法。它更简洁，因为唯一使用的 CSS 是 .active 类的样式。

使用这种方法，除了第一个元素之外的所有div 元素都默认隐藏。一个.active 类被添加到单击的元素中，然后用于确定显示哪个div。

jsFiddle example

$('#divtoggle li:first-child a').addClass('active');
$('.content').hide(); $('#div1').show();
$("#divtoggle a").click(function(){
    var active = (this.id).replace( /^\D+/g, '');
    $('.content').hide(); $('#div' + active).show();
    $('.active').removeClass('active');
    $(this).addClass('active');
});

Answer 4

不确定我是否正确地解释了您的问题，但此代码将使得如果您单击任何列表元素，第一个列表元素将被删除。

$('li').click(function() {
    $(this).siblings().find('#togglediv1').hide();
});

如果你想删除列表中的第一个，那么你可以使用这个：

$('li').click(function() {
    $(this).siblings(':visible').first().hide();
});

有一个fiddle！

如果可能，也可以考虑使用更新版本的 jQuery。