Question

这里是jQuery / javascript的新手，并寻求一些帮助。我正在编写一个带有简单导航菜单的网站。它的工作原理如下。用户单击菜单中的链接，链接将设置为“活动”颜色，相应的部分将从隐藏设置为可见（所有部分在文档加载时设置为隐藏）。当用户单击链接设置为活动颜色的其他链接时，其他链接将设置为默认颜色，任何可见部分都将设置为隐藏，相关部分将设置为可见。这很好用，但我使用了单独的元素，并且非常难看并且重复很多。我正在重写代码以使用.classes，并且在重复代码较少的情况下更灵活一些。

我的问题是：我如何告诉它要显示的部分？

用户点击a.linkfornavigation，设置颜色，section.blah设置为隐藏，部分#hisiswhatyouwant设置为可见。但是，如何告诉a.linkfornavigation它应该指向哪里呢？每个部分都有一个唯一的#id（我猜他们可以点击链接）但是如何从点击的链接中获取相关链接部分的#id？

非常感谢任何帮助。

HTML：

<!DOCTYPE html>
<html>     
  <head>
    <link rel="stylesheet" href="css/linkthinger-hybrid.css" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/linkthinger-hybrid.js" type="text/javascript"></script>
  </head>

  <body>

    <section id="links">
      <a class="thinger" href="#">Thing One</a>
      <a class="thinger" href="#">Thing Two</a>
      <a class="thinger" href="#">Thing Three</a>
      <a class="thinger" href="#">Thing Four</a>
      <a class="thinger" href="#">Thing Five</a>
    </section>

    <section id="things">
      <section id="thingone"   class="thing">I am thing one.</section>
      <section id="thingtwo"   class="thing">I am thing two.</section>
      <section id="thingthree" class="thing">I am thing three.</section>
      <section id="thingfour"  class="thing">I am thing four.</section>
      <section id="thingfive"  class="thing">I am thing five.</section>
    </section>

  </body>

的javascript：

    $(document).ready(function(){

//  Hides .thing class as soon as the DOM is ready.
//  $('section.thing').hide(0);

//  Highlight selected link & set all others to default.  
  $('#links a').click(function(){
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
  });

//  Shows one section and hides all others on clicking the noted link.
  $('a.thinger').click(function() {
    $('section.thing').hide(0);
    $('#thingone').fadeIn('slow');
    return false;
  });

})

CSS：

a {
    color: darkgreen;
    }

.selected {
    color: red;
    }

section.thing {
    background-color: blue;
    }

Answer 1

为链接指定正确的href值。在这种情况下，它将是元素的ID：

<a class="thinger" href="#thingone">Thing One</a>
<a class="thinger" href="#thingtwo">Thing Two</a>
....

优点是，即使禁用了JavaScript，点击链接也会使浏览器跳转到相应的元素。

然后您访问此属性并将其用作jQuery的ID选择器：

$('a.thinger').click(function() {
    $('section.thing').hide(0);
    $($(this).attr('href')).fadeIn('slow');
    return false;
});

Answer 2

要获取点击元素的ID，请执行以下操作：this.id

要告诉它要打开哪个部分，您可以添加一些data-属性来确定它：

<section id="links">
  <a class="thinger" href="#" data-open="thingone">Thing One</a>
  <a class="thinger" href="#" data-open="thingtwo">Thing Two</a>
  <a class="thinger" href="#" data-open="thingthree">Thing Three</a>
  <a class="thinger" href="#" data-open="thingfour">Thing Four</a>
  <a class="thinger" href="#" data-open="thingfive">Thing Five</a>
</section>

JS：

  $('#links a').click(function(){
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
    $('.thing').hide();
    $("#"+$(this).data('open')).show();
  });

小提琴演示：http://jsfiddle.net/maniator/sxrap/

Answer 3

更改此行：

$('#thingone').fadeIn('slow');

对此：

$('#things .thing').eq($(this).index('a.thinger')).fadeIn('slow');

它起作用是因为$(this).index('a.thinger')返回所单击锚点的整数索引，.eq(i)返回一个jQuery对象，该对象包含调用它的JQuery对象中的i元素。

jQuery Docs：

Answer 4

alert($(this).attr('id');如果你坚持jQuery

如何使用jQuery从单击的链接获取元素的#id？

4 个答案: