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

How does one to get the #id of an element from a clicked link using jQuery?

本文关键字：获取 元素 #id 链接 jQuery 单击 何使用      更新时间：2023-09-26

jQuery/javascript新手在这里寻找一点帮助。我正在写一个网站与一个简单的导航菜单。它是这样工作的。用户单击菜单中的链接，链接被设置为"活动"颜色，相应的部分被设置为从隐藏到可见(当文档加载时，所有的部分都被设置为隐藏)。当用户单击另一个链接时，该链接被设置为活动颜色，其他链接被设置为默认颜色，任何可见部分被设置为隐藏，相关部分被设置为可见。这工作得很好，但我使用了单独的元素，它非常丑陋，有很多重复。我在重写代码的过程中使用。classes和更灵活一点，少重复的代码。

我的问题是:我如何告诉它显示哪个section ?

用户点击a.link进行导航，颜色设置，节。部分设置为隐藏，部分#thisiswhatyouwant设置为可见。但如何告诉。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;
    }

给链接适当的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;
});

获取已单击元素的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/

改变这一行:

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

: 

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

它的工作，因为$(this).index('a.thinger')返回一个整数索引的锚点击，和.eq(i)返回一个jQuery对象包含i元素从它被调用的jQuery对象。

jQuery文档:

  • .index()
  • .eq()

alert($(this).attr('id');

相关文章：