simona6 Posted yesterday at 10:20 AM Share Posted yesterday at 10:20 AM We have a selection of tabs from a default Woocommerce website. The owner wants a button in the Short Description, than when clicked, takes the user down to the row of tabs (Description etc)... but SELECTS the "Product Enquiry" tab (which does have it's own #id). I've seen a few :target CSS methods, but don't understand. Can you please help? Quote Link to comment https://forums.phpfreaks.com/topic/326826-how-do-i-link-a-url-to-a-tab-so-it-selects-the-tab/ Share on other sites More sharing options...
jodunno Posted yesterday at 11:55 AM Share Posted yesterday at 11:55 AM target has plenty of documentation, so you shouldn't have a problem implementing it into your code. I do not use wordpress stuff and i cannot help you with that code but here is a sample of target practice and you should be able to work it into your project regardless of the method (css or js/css etc). <!DOCTYPE html> <html> <head> <title>CSS :target Practice</title> <style> ul.tabs { margin: 0px; padding: 4px; list-style-type: none; font-weight: bold; } .li { padding: 4px; border: solid 1px #ffffff; background: #ffffff; } #tab2content { display: none; } :target { border: solid 1px #009900; background: #e0e0e0; } #tab2:target { font-size: 24pt; } #tab2:target > #tab2content { display: block; } </style> </head> <body> <h1>CSS :target Practice</h1> <p><a href="#tab1">Short Description 1</a></p> <p><a href="#tab2">Short Description 2</a></p> <p>...</p> <ul class="tabs"> <li id="tab1">!Product Enquiry</li> <li id="tab2">Product Enquiry <ul id="tab2content"><li>Hello Product seeker</li></ul></li> </ul> </body> </html> https://www.w3.org/Style/Examples/007/target.en.html https://developer.mozilla.org/de/docs/Web/CSS/:target I hope that this is helpful, John Quote Link to comment https://forums.phpfreaks.com/topic/326826-how-do-i-link-a-url-to-a-tab-so-it-selects-the-tab/#findComment-1650161 Share on other sites More sharing options...
jodunno Posted 3 hours ago Share Posted 3 hours ago You have not reponded, so i want to add a second (uri method, in case you are actually trying to load a second page). My example requires an index.html page, a directory named target which contains its own index.html page. index.html at the root: <!DOCTYPE html> <html> <head> <title>CSS :target Practice</title> </head> <body> <h1>CSS :target Practice</h1> <p><a href="target/index.html#tab1">Short Description 1</a></p> <p><a href="target/index.html#tab2">Short Description 2</a></p> </body> </html> index.html in the target directory: <!DOCTYPE html> <html> <head> <title>CSS :target Practice</title> <style> ul.tabs { margin: 0px; padding: 4px; list-style-type: none; font-weight: bold; } .li { padding: 4px; border: solid 1px #ffffff; background: #ffffff; } #tab2content { display: none; } :target { border: solid 1px #009900; background: #e0e0e0; } #tab2:target { font-size: 24pt; } #tab2:target > #tab2content { display: block; } </style> </head> <body> <h1>CSS :target Practice</h1> <p>The target will be active per css (working in modern browsers: Edge/Chrome, Firefox, Opera and Safari)</p> <ul class="tabs"> <li id="tab1">!Product Enquiry</li> <li id="tab2">Product Enquiry <ul id="tab2content"><li>Hello Product seeker</li></ul></li> </ul> </body> </html> Perhaps you can let us know if you figured it out or not, John Quote Link to comment https://forums.phpfreaks.com/topic/326826-how-do-i-link-a-url-to-a-tab-so-it-selects-the-tab/#findComment-1650230 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.