Remove tabindex attribute from hyperlink

Question

I have an oracle apex page. I defined a tabscontainer region in it. There are two sub regions to this region. There is a hyper link inside each sub region, which is coded like

<a class="t-Tabs-link" href="#SR_R1" role="presentation" tabindex="-1">
  <span>1</span>
</a>

in first region and

<a class="t-Tabs-link" href="#SR_R2" role="presentation" >
  <span>2</span>
</a>

in second region.

I want to remove tabindex property of first region from this code using javascript and add property tabindex="-1" to second region.I can not add an id to this hyper link since oracle apex do not allow to edit default html attributes. How can I do this without assigning id ? or is there any way that I can assign id to this hyper link?

Answer 1

Use Jquery removeAttr to remove the attribute from any element.

Select the first index element and simply remove attribute from it

$(".t-Tabs-link").eq(0).removeAttr("tabindex");

You can also set attribute via Jquery attr() function

$(".t-Tabs-link").eq(1).attr("tabindex" , -1);

example

Answer 2

You can use document.querySelector and you don't need to know <a> 's ID.

You can remove tabindex by this.

document.querySelector('.t-Tabs-link:first-child').removeAttribute('tabindex');

You can set tabindex by this.

document.querySelector('.t-Tabs-link:last-child').setAttribute('tabindex', -1);