I'm working on a jquery tabbed panel, where tabs have been created as unordered list items, with links inside them.Here is the entire code:\[code\]<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.tabs {margin: 0;padding: 0; zoom : 1;}.tabs li {float: left;list-style: none;padding: 0;margin: 0;/*width:131px;*/}.tabs a {display: block;text-decoration: none;/*padding: 3px 5px;*/padding: 3px 0px;text-align:center;color: white;/*background-color: rgb(110,138,195);*/margin-right: 0px;/*border: 1px solid rgb(153,153,153);*/background: url(tab.png) no-repeat;/*margin-bottom: -1px;*/font-size:13px;width:131px;font-weight:bold;}.tabs .active {display: block;border-bottom: 1px solid white;text-align:center;color: #00000;color: rgb(51,72,115);background: url(tab_selected.png);margin-bottom: -1px;position: relative;width:131px;font-size:13px;font-weight:bold;}.panelContainer {clear: both;margin-bottom: 25px; border: 1px solid rgb(153,153,153); background-color: white;padding: 10px;}.panel h2 {color: rgb(57,78,121);text-shadow: none; }.panel p {color: black; }</style><script src="http://code.jquery.com/jquery-latest.js"></script><script>$(document).ready(function() {$('.tabs a').click(function() { // save $(this) in a variable for efficiency var $this = $(this); // hide panels $('.panel').hide(); $('.tabs a.active').removeClass('active'); // add active state to new tab $this.addClass('active').blur(); // retrieve href from link (is id of panel to display) var panel = $this.attr('href'); // show panel $(panel).fadeIn(250); // don't follow link down page return(false);}); // end click// open first tab$('.tabs li:first a').click();}); // end ready</script></head><body><div class="wrapper"><div class="content"> <div class="main"> <h1>Tabbed Panels</h1> <div class="tabbedPanels"> <ul class="tabs"> <li><a href="http://stackoverflow.com/questions/14415988/#panel1" tabindex="1">Lorem ipsum</a> </li> <li> <a href="http://stackoverflow.com/questions/14415988/#panel2" tabindex="2">dignissimos ducimus</a> </li> <li> <a href="http://stackoverflow.com/questions/14415988/#panel3" tabindex="3">Lorem ipsum dolor</a> </li> </ul> <div class="panelContainer"> <div id="panel1" class="panel"> <h2>Panel 1 content</h2> <p><img src="http://stackoverflow.com/questions/14415988/red_h.jpg" alt="Red" width="70" height="70" class="imgRight">At vero eoset accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p> <p><img src="http://stackoverflow.com/questions/14415988/slide3_h.jpg" alt="Old Course" width="70" height="70" class="imgLeft">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p> </div> <div id="panel2" class="panel"> <h2>Panel 2 content</h2> <p style="text-align:center;margin-top: 25px;"><img src="http://stackoverflow.com/questions/14415988/slide4.jpg" width="610" height="342" alt="tees"></p></div> <div id="panel3" class="panel"> <h2>Panel 3 content</h2> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p> </div> </div> </div> </div></div> </div> </body> </html>\[/code\]It is working properly. But the issue that I am facing is, if the tabbed header text is larger than image width then the text is not fitting into a single line.Now I want to create tab headers using three images, one image on the left, one middle repeating image and one image on the right side.Tried to achieve this as per the working code mentioned in this link Rounded corners for buttons using three images and css. But for my code it is not working. How do I do this? Plz help.Thanks in advance.
How to create tabbed panel tab headers using three images and css and jquery?
- Thread starter emormInue
- Start date