Light
Dark
System
Ask  Question

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
G
Guest 2 months ago
HTML
1 Answers
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)

S
Sean Author2 months ago
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 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
// 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  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle