Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
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 3 years ago
HTML
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Sean Author 3 years 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 <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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(