I'm learning Javascript right now, and attempting to change the text title of a particular tab. It's actually part of a larger Shiny dashboard project, but I want to add some custom functionality to a few tabs. Below are the tabs in question:
Simple enough. I first access my tabs in my Javascript file:
var tabScrub2 = $(document).find('[data-value="scrubTab2"]');
console.log(tabScrub2);
innerText
0
innerText
1
scrubTab2
var scrub2 = tabScrub2["1"];
console.log(scrub2);
a
innerText
scrubTab2
Just use jQuery
eq
method to get the relevant object index
from the array
.
For an example
//Query and get first element.
var tabScrub2 = $(document).find('[data-value="scrubTab2"]:eq(0)');
//Hide
tabScrub2.hide();
//Change title
tabScrub2.attr("title", "New Title Text");
Lean more about jQuery eq
here.
https://api.jquery.com/eq/
Since you use jquery
selectors tabScrub2[0]
returns the native DOM
element instead of another jQuery
object. Therefore the hide
function won't work in that object since the native DOM element doesn't implement such type of functionality for an element. That's why you have to use jQuery
pseudo selector as above. Because hide
will only work with a jQuery
object.