Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

how to open a tab by url


Hi There,

I want to open a tab by the tab name

like this

https://preview.keenthemes.com/html/metronic/docs/base/tabs#kt_tab_pane_6

when I browse the above URL it will load the default tab not the tab id in the URL

thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi happy,

Thank you for your kind words about Keen. Really appreciate it. May I know if are you using the Keen or Metronic theme?

If you are using the latest Metronic 8.x:

1) To activate the tab using the URL hash you should add the below function in src/js/components/app.js right after the initModal function and call it under the init function right after initModal call and recompile your assets with gulp or webpack. Then you will be able to activate the tabs using <core>url.com#kt_stats_widget_16_tab_2


var initTabs = function() {
const hash = decodeURIComponent(window.location.hash).replace(/\s/g, "-").substring(1);
let tabEl = document.querySelector("[data-bs-toggle][data-bs-target="#" + hash + ""]");

if (!tabEl) {
tabEl = document.querySelector("[data-bs-toggle="pill"][href="#" + hash + ""]");
}
if (!tabEl) {
tabEl = document.querySelector("[data-bs-toggle="tab"][href="#" + hash + ""]");
}

if (tabEl) {
bootstrap.Tab.getOrCreateInstance(tabEl).show();
}
}


2) You can try to change the Dropdown hover timeout in the KTMenu plugin's source js/components/menu.js</code:


// Default Options
var defaultOptions = {
dropdown: {
hoverTimeout: 200,
zindex: 107
},

accordion: {
slideSpeed: 250,
expand: false
}
};


We will consider exposing this parameter to the HTML attribute level in a future update.

Please give it a try and please let us know the result.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(