"#tab-item-6" what is this?

Hi

quick question.. hopefully :sweat_smile:

When tabbing my way around an internal admin site, i find this at the bottom left corner of the google chrome window.
Anyone knows if theres any way to conjure up an KBM action to navigate to this tab-item directly? Or if not, any hints on what tab-item is in general?

53

It’s an internal HTML link target id. So you want to target the string after the octothorpe/hash (‘#’) character.

Sounds like you need to load the URL and then navigate to this I’d.

Hey Isak,

You should be able to just hit <Return>.

-Chris

Heres my little case in some detail.

All my current work is on this site at the moment. And I´ve made good use of KBM.

I would like to get to Categories on the right side. But using the Click Google Chrome Link action will not work for this one. Using the action below takes me to the categories button on the left sidebar. And I´ve not found any other link that will work. So I suspect something happened when there are two buttons with same identifier.

Therefore i thought perhaps that the #tab-item-6 might be helpful. But maybe not?


We should be able to click on this using JavaScript in Browser.
Right-click on the “Categories” tab of interest, and select “Inspect”.
Then in the Chrome Tools, click on a major <div> tag above that that has an “id” or “class” attribute.
right-click and select “Copy HTML” (i.e. copy the entire <div> element).
Paste that here using a Code Block.

I guess you mean copying outer HTML?

<div class="panel-heading nav-tabs-custom" role="tabpanel" style="padding-bottom: 0">
		<ul class="nav nav-tabs" role="tablist" id="tab-group-1">
														<li role="presentation" class="">
					<a href="#tab-item-1" aria-controls="tab-item-1" role="tab" data-toggle="tab" aria-expanded="false">Legal company info</a>
				</li>
											<li role="presentation">
					<a href="#tab-item-2" aria-controls="tab-item-2" role="tab" data-toggle="tab">Public information</a>
				</li>
											<li role="presentation">
					<a href="#tab-item-3" aria-controls="tab-item-3" role="tab" data-toggle="tab">Invoice settings</a>
				</li>
											<li role="presentation">
					<a href="#tab-item-4" aria-controls="tab-item-4" role="tab" data-toggle="tab">Requests</a>
				</li>
											<li role="presentation">
					<a href="#tab-item-5" aria-controls="tab-item-5" role="tab" data-toggle="tab">Text &amp; logos</a>
				</li>
											<li role="presentation" class="active">
					<a href="#tab-item-6" aria-controls="tab-item-6" role="tab" data-toggle="tab" aria-expanded="true">Categories</a>
				</li>
											<li role="presentation">
					<a href="#tab-item-7" aria-controls="tab-item-7" role="tab" data-toggle="tab">Start/stop</a>
				</li>
											<li role="presentation">
					<a href="#tab-item-8" aria-controls="tab-item-8" role="tab" data-toggle="tab">Hide customer</a>
				</li>
											<li role="presentation">
					<a href="#tab-item-9" aria-controls="tab-item-9" role="tab" data-toggle="tab">Other settings</a>
				</li>
											<li role="presentation">
					<a href="#tab-item-10" aria-controls="tab-item-10" role="tab" data-toggle="tab">Statistics</a>
				</li>
					</ul>
	</div>
´´´

Yep. That was perfect.

Just put this JavaScript in a Execute a JavaScript in Browser actions.

It will return the URL for the Categories tab.

var catElem = document.querySelector('div.panel-heading.nav-tabs-custom a[aria-controls="tab-item-6"]');
if (catElem) {
  var link = catElem.href;
} else { var link = "NOT_FOUIND"}

link;

image

Questions?

Not to detract from the technically correct answer but the OP should be aware that this script will need some maintenance if and when the web page gets modified / restructured. These sorts of sites do this all the time.

Yes, IF the web site does make a major change to it's structure, specifically to the classes of the <div> or the attribute of the <a>, then this script will fail. It it does, then the script will return "NOT_FOUND", and it should be easy to identify and make the needed changes.

But it will still work with other major changes. IME, with this type of CSS selector, it is unlikely that it will fail, unless the web designer decides to do a major rewrite of the page design. this happens, but not very often.