Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Metronic 9 and JQuery


Hello,
I have developed my web site in ASPCore with Jquery and Bootstrap. I purchased metronic and try version 9. I have some problems. Example in metronic 8 with this jquery code " $("#myTab button:first").tab("show");" I can change active tab but metronic 9 does not use bootstrap so this function gets error. Metronic 8 cames with Jquery and bootstrap but metronic 9 not.
What should I do? Shall I use another javascript library. But I wrote all my codes with Jquery.


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 (5)


Finding a reliable writing service can be a challenge, but this article provides clear and actionable tips to help students navigate their options. The emphasis on reading reviews and verifying credentials really stood out to me, as these steps are crucial in ensuring quality and trustworthiness. As a student who values dependable assistance, I appreciate the insights shared here.



Take a look at the tab documentation. You can set the tab to show by calling the show method.

https://keenthemes.com/metronic/tailwind/docs/components/tabs



Hi,

Please note that Metronic 9 Tailwind does not use jQuery.
For Metronic 9 Tailwind you will need to use its own Tab components API as shown here.

Regards.



Thanks for reply. But I wanna ask another question. I need to switch first tab with js but I couldn't. There is some code in the link you wrote but I think there's something missing.



Hi,

You can use the below code to show your tab by ID:


const tabsEl = document.querySelector("#my_tabs");
const tabEl = document.querySelector("#my_tab");
const tabs = KTTabs.getInstance(tabsEl);
tabs.show(tabEl);


Regards,
Sean


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  :(