johnnyboy16 Posted July 29, 2010 Share Posted July 29, 2010 Hi guys. I need some help here with a some javascript tabs. I'd like to modify this script so that I can have 3 tabs with different widths. Right now the script requires me to use the same width on each tab. Here is the tab script I am using. Thanks in advance for helping me. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>tabs</title> <style type="text/css"> body { margin: 10px; font-family: Arial; font-size: 12px; } .updBtn_Container { width: 400px; height:275px; margin-bottom: 10px; float: left;} .updBtn_Bar { clear: both; width: 397px; height: 27px; border-bottom: 1px solid #cde6fe; padding-left: 5px; } .updBtn_ContentPanel { clear: both; width: 400px; height: 240px; border: 1px solid #afcfee; border-top: 0px; background-color: #ffffff; } .updBtn_Content { clear: both; width: 380px; height: 240px; padding: 10px;} .updBtn { float: left; width: 80px; background: url(images/updBtn.jpg) repeat-x #F7F7F7; border: 1px solid #afcfee; border-bottom: 0px; height: 16px; padding: 5px; text-align: center; margin-right: 3px; color: #333333; cursor: pointer;} .updBtn_Highlight { float: left; width: 80px; background: url(images/updBtn_h.jpg) repeat-x #F7F7F7; border: 1px solid #afcfee; border-bottom: 0px; height: 16px; padding: 5px; text-align: center; margin-right: 3px; color: #000000; cursor: pointer;} .updBtn_Selected { float: left; width: 80px; background-color: #ffffff; border: 1px solid #afcfee; border-bottom: 1px solid #ffffff; color: #52738f; height: 16px; padding: 5px; text-align: center; margin-right: 3px; cursor: pointer;} </style> <script language="javascript" type="text/javascript"> function updButton(obj) { var cls = obj.className; if(cls!='updBtn_Selected') { if(cls=='updBtn') { cls = 'updBtn_Highlight'; } else { cls = 'updBtn'; } } obj.className = cls; } function selectUpd(obj) { for (var x = 1; x <= 3; x++) { document.getElementById("updButton"+x).className = 'updBtn'; document.getElementById("updContent"+x).style.display = 'none'; } obj.className='updBtn_Selected'; var tmp = obj.id; var num = tmp.substr(tmp.length-1); document.getElementById("updContent"+num).style.display = 'block'; } </script> </head> <body> <div class="updBtn_Bar"> <div id="updButton1" onclick="javascript: selectUpd(this);" class="updBtn_Selected" onmouseover="javascript: updButton(this);" onmouseout="javascript: updButton(this);">LINK 1</div> <div id="updButton2" onclick="javascript: selectUpd(this);" class="updBtn" onmouseover="javascript: updButton(this);" onmouseout="javascript: updButton(this);">LINK 2</div> <div id="updButton3" onclick="javascript: selectUpd(this);" class="updBtn" onmouseover="javascript: updButton(this);" onmouseout="javascript: updButton(this);">LINK 3</div> </div> <div class="updBtn_ContentPanel"> <div id="updContent1" class="updBtn_Content">Content Of Link 1</div> <div id="updContent2" class="updBtn_Content" style="display: none;">Content Of Link 2</div> <div id="updContent3" class="updBtn_Content" style="display: none;">Content Of Link 3</div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/209179-help-with-tabs-and-with/ Share on other sites More sharing options...
johnnyboy16 Posted July 29, 2010 Author Share Posted July 29, 2010 Hi guys. I need some help here with some javascript tabs. I'd like to modify this script so that I can have 3 tabs, all with different widths. Right now the script requires me to use the same width on each tab. Here is the tab script I am using. Thanks in advance for helping me. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>tabs</title> <style type="text/css"> body { margin: 10px; font-family: Arial; font-size: 12px; } .updBtn_Container { width: 400px; height:275px; margin-bottom: 10px; float: left;} .updBtn_Bar { clear: both; width: 397px; height: 27px; border-bottom: 1px solid #cde6fe; padding-left: 5px; } .updBtn_ContentPanel { clear: both; width: 400px; height: 240px; border: 1px solid #afcfee; border-top: 0px; background-color: #ffffff; } .updBtn_Content { clear: both; width: 380px; height: 240px; padding: 10px;} .updBtn { float: left; width: 80px; background: url(images/updBtn.jpg) repeat-x #F7F7F7; border: 1px solid #afcfee; border-bottom: 0px; height: 16px; padding: 5px; text-align: center; margin-right: 3px; color: #333333; cursor: pointer;} .updBtn_Highlight { float: left; width: 80px; background: url(images/updBtn_h.jpg) repeat-x #F7F7F7; border: 1px solid #afcfee; border-bottom: 0px; height: 16px; padding: 5px; text-align: center; margin-right: 3px; color: #000000; cursor: pointer;} .updBtn_Selected { float: left; width: 80px; background-color: #ffffff; border: 1px solid #afcfee; border-bottom: 1px solid #ffffff; color: #52738f; height: 16px; padding: 5px; text-align: center; margin-right: 3px; cursor: pointer;} </style> <script language="javascript" type="text/javascript"> function updButton(obj) { var cls = obj.className; if(cls!='updBtn_Selected') { if(cls=='updBtn') { cls = 'updBtn_Highlight'; } else { cls = 'updBtn'; } } obj.className = cls; } function selectUpd(obj) { for (var x = 1; x <= 3; x++) { document.getElementById("updButton"+x).className = 'updBtn'; document.getElementById("updContent"+x).style.display = 'none'; } obj.className='updBtn_Selected'; var tmp = obj.id; var num = tmp.substr(tmp.length-1); document.getElementById("updContent"+num).style.display = 'block'; } </script> </head> <body> <div class="updBtn_Bar"> <div id="updButton1" onclick="javascript: selectUpd(this);" class="updBtn_Selected" onmouseover="javascript: updButton(this);" onmouseout="javascript: updButton(this);">LINK 1</div> <div id="updButton2" onclick="javascript: selectUpd(this);" class="updBtn" onmouseover="javascript: updButton(this);" onmouseout="javascript: updButton(this);">LINK 2</div> <div id="updButton3" onclick="javascript: selectUpd(this);" class="updBtn" onmouseover="javascript: updButton(this);" onmouseout="javascript: updButton(this);">LINK 3</div> </div> <div class="updBtn_ContentPanel"> <div id="updContent1" class="updBtn_Content">Content Of Link 1</div> <div id="updContent2" class="updBtn_Content" style="display: none;">Content Of Link 2</div> <div id="updContent3" class="updBtn_Content" style="display: none;">Content Of Link 3</div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/209179-help-with-tabs-and-with/#findComment-1092448 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.