Jump to content

Search the Community

Showing results for tags 'tabs'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 20 results

  1. Hello! I'm looking for some help with my Javascript code. I have a services page with 5 tabs. I used w3schools to obtain and tweak this code as needed. However, I need to link to a specific tab from my home page and I'm having trouble editing the Javascript to make this possible. Here's what I have thus far: Services Page HTML: <div class="col"> <button class="tablinks" onclick="openCity(event, 'nonclinical')"><div class="tab-wrap-blue"><div class="nonclinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Nonclinical Development</h4></div></div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'clinical')"><div class="tab-wrap-green"> <div class="clinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Clinical Development</h4></div> </div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'safety')"><div class="tab-wrap-dkgreen"><div class="safety" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Regulatory, Safety and Manufacturing</h4></div></div></button> </div> <div class="col"> <button class="tablinks" onclick="openCity(event, 'life')"><div class="tab-wrap-gray"><div class="life" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Life Science Enterprises</h4></div></div></button> </div> Current Javascript: <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); }); </script> Home page link needs to go to both the services page, and open up a specific <button>. Ie. <button class="tablinks" onclick="openCity(event, 'clinical')"> I'm new to Javascript and W3Schools has been such a help! Hoping there is a simple solution from someone who knows this code well. Thanks so much!
  2. Hello, I am using the How to Create Tabs tutorial (https://www.w3schools.com/howto/howto_js_tabs.asp), but I can't get the default tab to work. It seems to work in the Tryit Editor, but even pasting the code as is, it doesn't work. I am using Shopify and have a .js, .css, and a .liquid (page template) document. Other changes on the pages seem to take affect. {{ 'tabs.js' | asset_url | script_tag }} {{ 'tabs.css' | asset_url | stylesheet_tag }} {% include 'breadcrumb' %} <meta name="viewport" content="width=device-width, initial-scale=1"> <div class="grid"> <div class="grid-item large--two-thirds push--large--one-sixth"> <h1>{{ page.title }}</h1> <div class="rte"> <h2>Tabs</h2> <p>Click on the x button in the top right corner to close the current tab:</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> <h3>Paris</h3> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <span onclick="this.parentElement.style.display='none'" class="topright">&times</span> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> </div> {{ page.content }} </div> </div> </div> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } /* Style the close button */ .topright { float: right; cursor: pointer; font-size: 28px; } .topright:hover {color: red;}
  3. Bart

    Centering buttons

    I used the guide from this link https://www.w3schools.com/howto/howto_js_tabs.asp I would like to center the buttons. I currently have 22 buttons. The second line is arranged to the left. I want them to be in the middle. I tried several ways but unfortunately to no avail. Thank you in advance for your help.
  4. Hi all, I am trying to work with tabs and using the How to Create Tabs page on the w3 site below. I am unclear on one part. In the HTML code, what is the event parameter referring to in the onclick function. I've copied on of the relevant lines below. If someone could elaborate further it would be much appreciated. <button class="tablinks" onclick="openCity(event, 'London')">London</button> https://www.w3schools.com/howto/howto_js_tabs.asp
  5. I am new to web development, so be patient please I am working with a tab navigation system. It happens to be bootstrap, but this question is not specific to bootstrap. There are four tabs; for the sake of simplicity we will call them tabs "A", "B", "C", and "D." I have a single SQL table and one of the columns --we will call it "Letter"-- identifies each row with one of the four letters. When a user clicks on "A" tab, they should see all the rows where "Letter" = "A". The same for tabs "B", "C", and "D." Right now I am running four separate queries, one for each tab. This seems ridiculous. There must be a way to grab all the data from the table with one query, sort the rows based on their "Letter" into four separate multi dimensional arrays, and then loop through the appropriate array to display the data for a particular "Letter" when a user selects that tab. I cannot figure out how to do this. Any suggestions would be most helpful. Thanks.
  6. Is there any complete W3.JS solution for Tabs, Accordions, SlideShows etc?
  7. sue

    W3.css Tabs

    Hi, I am using the w3.css tabs and have a customised cursor. However the cursor will not work over the tabs. What do I need to set to get it to work over the tabs also?
  8. I'm using W3.CSS tabs and I have a class assigned so that the active tab is colored. However, when the page loads none of the tabs are open. I have to click on one. I'm wanting the 1st tab to be open and highlighted with the active color when the page is first loaded. Here's my code: <ul class="w3-navbar w3-grey"> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab1');">TAB 1</a></li> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab2');">TAB 1</a></li> <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab3');">TAB 3</a></li> </ul> <div id="tab1" class="tab"> <p>Tab 1 content</p> </div> <div id="tab2" class="tab"> <p>Tab 2 content</p> </div> <div id="tab3" class="tab"> <p>Tab 3 content</p> </div> <script> openTab("tab1") function openTab(evt, tabName) { var i, x, tablinks; var x = document.getElementsByClassName("tab"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++){ tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " w3-red"; } </script> Thanks!
  9. elcaiaimar

    CSS in tabs

    Hello, I have a problem in my website. Recently, I'm using tabs to show my information but this is changing the place of some elements in my web. I would like to know how I can solve this. I've created and attached a little .html with .css where I show what happens with my tabs. You will see two tabs with information and two buttons (imbornales and tramos). Both buttons should be under the tabs, but imbornales appears on the right side. And when I open some tab, both buttons are hidden. I think it's a problem with the position: absolute; I've tried to change it but the tabs behaviour is not the same. Any ideas? Thank you very much! pestanias.css pestanas.html
  10. Hello Internet, I have a basic textarea element written as follows: <textarea name="contact_feedback" id="contact_feedback" value “” rows="4" cols="26" style="border: 0px solid #000000;"></textarea> My dilemma is that Chrome/Safari they don’t place 7 tabs in the textarea when the window loads but IE8 does. Can I use in-line CSS or something else to eliminate these tabs when the window loads? Thanks!
  11. Hello: I'm trying to develop a web applications for maintaining database tables (Oracle tables and jsp). I use html, javascript, jquery and json. Notepad++ as editor.. And use the documentation of w3school. But I'd like to use an IDE which allow me to develop applications which include Menu, tabs and scrollable tables. The IDE I've tried include html tag and javascript code assistant, but not complex objets like tabs and applications menu. Can any tell me and IDE which include menu, tabs, ... Or, how can I create: - An application menu. - Tabs. in an easy way. Thanks
  12. Hi everybody, I was able with some research to find documentation on tabbed navigation. I gathered all the information I found, and decided to make a code entirely with css and css3. The look is nice, however I am unable to control the height of the tabs. I set a value in the class .tablist inside the css sheet, but the height does not increase if I change this value. Moreover it seems it depends on the font-size and on the padding value in .tablist li a. I attached four html pages (page1.html ... page4.html): page1.html page2.html page3.html page4.html and the css sheet: style.css Does any of any idea of how can I take control over the height of the tabs? Many thanks in advance
  13. Gerbrandd

    Aligning <div>

    Hello, I'm experiencing a little problem when trying to align different div sections. The page loads correctly in Safari/Chrome but when using other browsers, there is a little displacement (see image). I don't know what is causing the problem. Hope anyone of you can help me. Thanks in advance! <html><head>(...)<style>body{background-color:rgb(235,235,235);}.header{background-color:rgb(17,76,131);position:absolute;top:0px;left:0px;right:0px;height:120px;}.base{background-color:rgb(250,193,37);margin:auto;padding-bottom:15px;width:980px;padding-top:125px;height:auto;text-align:center;}.tabbed_box{margin:0px auto 0px auto;width:950px;}.tabbed_area{border:1px solid #494e52;background-color:#636d76;padding:8px;}ul.tabs{margin:0px;padding:0px;margin-top:5px;margin-bottom:5px;}ul.tabs li {list-style:none;display:inline;}ul.tabs li a{background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #464c54;}ul.tabs li a:hover{background-color:#2f343a;border-color:#2f343a;}ul.tabs li a.active{background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom:1px solid red;}ul.list{list-style-type: square;font-family:"Segoe UI", sans-serif;font-size:14px;}.content{background-color:#ffffff;padding:10px;border:1px solid #464c54;text-align:left;font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;}#content_2,#content_3,#content_4,#content_5,#content_6,#content_7,#content_8,#content_9 {display:none;}</style></head><body><div class="header">Test?</div><div class="base"> <div id="tabbed_box_1" class="tabbed_box"> <div class="tabbed_area"> <script src="js/functions.js" type="text/javascript"></script> <ul class="tabs"> <li><a href="javascript:tabSwitch_2(1,9,'tab_','content_');" id="tab_1" class="active">Ligging</a></li> <li><a href="javascript:tabSwitch_2(2,9,'tab_','content_');" id="tab_2">Faciliteiten</a></li> <li><a href="javascript:tabSwitch_2(3,9,'tab_','content_');" id="tab_3">Logies</a></li> <li><a href="javascript:tabSwitch_2(4,9,'tab_','content_');" id="tab_4">Eten & Drinken</a></li> <li><a href="javascript:tabSwitch_2(5,9,'tab_','content_');" id="tab_5">Sport</a></li> <li><a href="javascript:tabSwitch_2(6,9,'tab_','content_');" id="tab_6">Animatie</a></li> <li><a href="javascript:tabSwitch_2(7,9,'tab_','content_');" id="tab_7">Kinderen</a></li> <li><a href="javascript:tabSwitch_2(8,9,'tab_','content_');" id="tab_8">Extra</a></li> <li><a href="javascript:tabSwitch_2(9,9,'tab_','content_');" id="tab_9">Prijzen & Contact</a></li> </ul> <div id="content_1" class="content">Content for Tab 1</div> <div id="content_2" class="content">Content for Tab 2</div> <div id="content_3" class="content">Content for Tab 3</div> <div id="content_4" class="content">Content for Tab 4</div> <div id="content_5" class="content">Content for Tab 5</div> <div id="content_6" class="content">Content for Tab 6</div> <div id="content_7" class="content">Content for Tab 7</div> <div id="content_8" class="content">Content for Tab 8</div> <div id="content_9" class="content">Content for Tab 9</div> </div> </div></div></body></html>
  14. Alright, my jQuery.tabs function goes over my custom div. I've tried to add z-index 0, 10, 500 to the custom div but tabs is still on the custom content. Any fix?
  15. Im wondering how to select .tabs column on button click because anything i tried didin't work for me. I've tried methdows below. Lets imagine my tab would be <div id="tabs"><li><a href="#tabs-1">Page1</a></li><li><a href="#tabs-2">Page2</a></li><li><a href="#tabs-3">Page3</a></li><li><a href="#tabs-4">Page4</a></li><div id="tabs-1">Page1 content here <button type="submit" value="Clickme" id="clickme"></div><div id="tabs-2">Page2 content here</div><div id="tabs-3">Page3 content here</div><div id="tabs-4">Page4 content here</div></div> And jQuery $(function() {$("#tabs").tabs();$("#clickme").on('click', function() {alert("This works");$("#tabs").tabs({selected:3}); //Doesnt work$("#tabs").tabs("select", "#tabs2"); //Doesnt work});}); So the alert work but tabs select doesn't. Yes i have jQuery & jQuery-ui files linked. Prob tried all methods herehttp://stackoverflow.com/questions/5912762/jquery-ui-tabs-how-to-select-a-tab-based-on-its-id-not-based-on-index jquery-ui tabshttp://jqueryui.com/tabs/
  16. JoReL

    Making a Tab menu

    I´m looking for a tutorial and how to make a menu with 3 tabs with different content each. one of the tabs will have a video. My question is, How can i achieve this?Will it be on html only, css, or both?Thanks in advance for your time. :)Currently im looking on google but nothing special on how to achieve this.
  17. Hi all. I'm pretty new to web design with CSS, so bear with me if this is a really basic question. I'm having trouble getting my positioning right. Here's the webpage so far:http://studentaccess...site/index.html I want the tabs to sit on top of the image. Even though they are before the <div id="content"> part in my HTML, they are still overlapping the image, as you see.I also want them to be flush with the left edge of the image (which is centered). Here's the relevant part of the HTML:<body bgcolor="#EDEDED"> <div id="header"><p><span id="title"> AVA </span><br> my challenge for the 2013 year is to record one original song or musical piece per month.</p></div> <div id="Tabs"><ul><li><a href="Challenge.html">This month's song</a></li><li><a href="Compositions.html">Compositions </a></li><li><a href="Covers.html">Covers </a></li><li><a href="hire.html">Hire AVA to sing </a></li></ul> </div> <!– End of Tabs Div –> <div id="content"> <div id="Content_Area"><p>...the text...</p></div> <div id="followbox">links to RSS feeds, etc., here</div></div> <!-End of content-> </body> And the relevant CSS:body {font-family: "Mona Lisa Solid ITC TT","Modern No. 20",Garamond,Gabriola,serif;font-size: 1.4em;} #Tabs {display: block;position: relative;margin: 0;margin-right: auto;margin-left: auto;} #Tabs ul {padding: 0px;list-style-type: none;} #Tabs ul li {display: inline-block;clear: none;float: left;} #Tabs ul li a {position: relative;margin-top: 0px;display: block;margin-left: 5px;line-height: 1em;padding-left: 10px;background: #f6f6f6;border: 1px solid #ccc;border-bottom: 0px;-moz-border-radius-topleft: 4px;border-top-left-radius: 4px;-moz-border-radius-topright: 4px;border-top-right-radius: 4px;/* end of rounded borders */ width: 150px;height: 50px;color: #000000;text-decoration: none;font-style: italic;} #Tabs ul li a:hover {text-decoration: underline;} #content {background-image: url(images/bg_image_med.jpg);background-repeat: none;border: 1px solid #000000;height: 500px;width: 900px;margin-left: auto;margin-right: auto;} #Content_Area {padding: 15px;overflow: hidden;position: relative;width: 620px;height: 500px;overflow: hidden;} p { padding: 15px; } What am I doing wrong?Thanks in advance!
  18. Hey everyone,This is my first post here, so please don't be too critical. Details: I'm coding a tabbed page and I have the basic layout set up as well as the javascript working to allow me to switch back and forth between tabs. Problem: The content I want to place in the Tabs are other HTML pages to be load and I'm totally oblivious on how to this. My code is below. What would I have to do in order to load the page without messing up any of the current functions or code? Much Thanks in advance <head><style type="text/css"> body { margin:40px; } #tabbed_box { margin: 0px auto 0px auto; width:300px; } .tabbed_box h4 { font-family:Arial, Helvetica, sans-serif; font-size:23px; color:#000000; letter-spacing:-1px; margin-bottom:10px; } .tabbed_box h4 small { color:#e3e9ec; font-weight:normal; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; text-transform:uppercase; position:relative; top:-4px; left:6px; letter-spacing:0px; } .tabbed_area { padding:8px; width:auto; } ul.tabs { margin:0px; padding:0px; } ul.tabs li { list-style:none; display:inline; } ul.tabs li a { background-color:#464c54; color:#ffffff; padding:8px 14px 7px 14px; text-decoration:none; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; border:2px solid #464c54; border-bottom: none; background-image:url(http://www.jbsbcorp.com/gabriel/gtl/tab_off.jpeg); background-repeat:repeat-x; background-position:bottombottom; } ul.tabs li a:hover { background-color:#2f343a; border-bottom: none; } ul.tabs li a.active { background-color:#ffffff; color:red; border:2px solid #464c54; border-bottom: 2px solid #ffffff; background-image:url(http://www.jbsbcorp.com/gabriel/gtl/tab_on.jpg); background-repeat:repeat-x; background-position:top; } .content { background-color:#ffffff; padding:10px; border:2px solid #464c54; background-image:url(http://www.jbsbcorp.com/gabriel/gtl/content_bottom.jpg); background-repeat:repeat-x; background-position:bottombottom; } #look_2, #look_3, #look_4{ display:none; } ul.tabs { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; } .content ul { margin:0px; padding:0px 20px 0px 20px; } .content ul li { list-style:none; border-bottom:1px solid #d6dde0; padding-top:15px; padding-bottom:15px; font-size:13px; } .content ul li a { text-decoration:none; color:#3e4346; } .content ul li a small { color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px; } .content ul li:last-child { border-bottom:none; }</style><script type="text/javascript"> function tabSwitch(new_tab, new_content) { document.getElementById('look_1').style.display = 'none'; document.getElementById('look_2').style.display = 'none'; //document.getElementById('look_3').style.display = 'none'; //document.getElementById('look_4').style.display = 'none'; document.getElementById(new_content).style.display = 'block'; document.getElementById('tab_1').className = ''; document.getElementById('tab_2').className = ''; //document.getElementById('tab_3').className = ''; //document.getElementById('tab_4').className = ''; document.getElementById(new_tab).className = 'active'; } </script></head><body> <div class="tabbed_area"> <ul class="tabs"> <li><a href="javascript:tabSwitch('tab_1', 'look_1');" id="tab_1" class="active">LOOK 1</a></li> <li><a href="javascript:tabSwitch('tab_2', 'look_2');" id="tab_2">LOOK 2</a></li> <!-- <li><a href="javascript:tabSwitch('tab_3', 'look_3');" id="tab_3">LOOK 3</a></li> --> <!-- <li><a href="javascript:tabSwitch('tab_4', 'look_4');" id="tab_4">LOOK 4</a></li> --> </ul> <!-- LOOK ONE --> <div id="look_1" class="content"> <ul> <li><a href=""></a></li> </ul> </div> <!-- LOOK TWO --> <div id="look_2" class="content"> <ul> <li><a href="">December 2008 <small>6 Posts</small></a></li> </ul> </div> <!-- LOOK THREE <div id="look_3" class="content"> <ul> <li><a href="">Home</a></li> </ul> </div> --> <!-- LOOK FOUR <div id="look_4" class="content"> <ul> <li><a href="">dhgdh</a></li> </ul> </div> --> </div> </body>
  19. So....i have this series of tabs (visually) and i would like to now if there is a way to refresh their contents everytime i click on them...
  20. Would like to know how to create tabs like argos . They have got tabs like Description, Reviews and so on. Thanks.
  • Create New...