使用href属性点击链接上的JQuery

时间:2017-02-12 18:02:42

标签: javascript jquery html css

我有以下代码结构。它是一组wordpress标签。我在网站上有很多标签,使用Jquery我想在用户点击其中一个链接时触发一个功能,但我不能应用ID属性,所以我的功能在下面不起作用......有什么建议吗?

JQUERY

$('#1485856532455-70ee0dfe').on('click', function() {
$('.otherdiv').css('background-image', 'url(http://placehold.it/200x200/ff0000)');
})

HTML

<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab">
<a href="#1485856532455-70ee0dfe"> <span class="vc_tta-title-text">Title</span></a>
</li>

<li class="vc_tta-tab">
<a href="#1485856532489"><span class="vc_tta-title-text">Title</span></a></li>
</ul>

4 个答案:

答案 0 :(得分:1)

您无法通过ID选择它们,因为它们没有ID。但您可以使用CSS Atrribute-Equal Selectorhref属性获取它们。像这样:

$('[href="#1485856532455-70ee0dfe"]').on('click', function() {
    // ...
}

更多CSS选择器here

工作代码段

&#13;
&#13;
$('[href = "#1485856532455-70ee0dfe"]').click(function() {
  alert("#1485856532455-70ee0dfe was clicked! Hoooray!");
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="vc_tta-tabs-list">
  <li class="vc_tta-tab">
    <a href="#1485856532455-70ee0dfe"> <span class="vc_tta-title-text">Title</span>
    </a>
  </li>

  <li class="vc_tta-tab">
    <a href="#1485856532489"><span class="vc_tta-title-text">Title</span></a>
  </li>
</ul>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

然后使用属性选择器:

$('[href="#1485856532455-70ee0dfe"]').on('click', function() {....});

答案 2 :(得分:0)

$('#1485856532455-70ee0dfe').on('click', function() { - 表示我们在页面上有一些ID为1485856532455-70ee0dfe的元素。在您的HTML代码中没有带有文本1485856532455-70ee0dfe的ID,这就是为什么您的代码不起作用。

您需要修复两个案例:

  1. 将ID添加到所需元素

  2. 将js更改为$('[href="1485856532455-70ee0dfe"]').on('click', function() {

答案 3 :(得分:0)

你不能给这样的链接一个id。但是你可以通过$(&#39; [href =&#34;#1485856532455-70ee0dfe&#34;]&#39;)来选择与jquery的链接。(&#39;点击&#39;,功能( ){....});