Question

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

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作为锚点。 E.g：

<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

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

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 3

我自己的建议如下：

$("#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

参考文献：

Answer 4

不确定我是否正确解释了您的问题，但是这段代码会使您在单击任何列表元素时删除第一个列表元素。

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

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

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

拥有fiddle！

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

显示带有活动a的简单显示/隐藏内容菜单中的第一个

4 个答案: