August 30, 2008 04:22am pdt

Member Login

Hall of Fame

Yearly

1hielo 737,247
2hernst42 339,932
3angelIII 295,760
4logudotcom 175,643
5Ray_Pas... 146,471
6routinet 146,197
7Roonaan 123,118
8glcummins 106,477
9RQuadling 104,446
10nplib 102,478
11yodercm 88,064
12bportlock 81,562
13rowejd 81,043
14dr_dedo 80,410
15Xyptilon2 77,792
16fibo 76,001
17gamebits 52,244
18ali_kayahan 47,199
19Michael701 47,100
20steelseth12 45,854
21jason1178 44,225
22Tchuki 42,712
23ee_rlee 40,914
24virmaior 40,885
25cedlinx 40,325

	[x] Attachment Details

CSS Menu or Tabs - active state

Zones: Cascading Style Sheets (CSS), PHP and Databases

Tags: CSS

I have a tabbed menu within a php file that needs to have an active state assigned when the tab is active. The links are pulling product info from a database, so using <li id="current"> will not work (as shown is sample below) because the code exists in one php file, so the current state needs to happen dynamically. I can't manually assign 'current' to any of the items because the tab would remain active, no matter which tab is selected.

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:

           
           
             CSS:
 
    #tabsE {
      
	text-align:center;
 background:  url(images/aerialshdr.gif) no-repeat center top;margin:0;padding:0px; FONT-SIZE:10px; FLOAT: left; WIDTH: 783px; height:70px;LINE-HEIGHT: normal;
    font-weight:bold;
      }
    #tabsE ul {
        margin-top:41px; 
        padding:0px 0px 0 107px;
        list-style:none;
		font-family:verdana, arial, sans-serif;
		font-size:10px;
      }
    #tabsE li {
      display:inline; width:144px; height:62px;
      margin:0; 
      padding:0;
      }
    #tabsE a {
      float:left;
       width:144px; height:62px;
      margin:0;
      padding:0 0 0 0px;
      text-decoration:none;
      }
    #tabsE a span {
      float:left;
      display:block;
      background: url(tabrightE.gif) no-repeat right top;
      padding:12px 0px 4px 0px;
      color:#83827a;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#b28c34;
      }
    #tabsE a:hover {
      background-position:0% -31px;
      }
    #tabsE a:hover span {
      background-position:100% -31px;
      }
 
        #tabsE #current a {
                background-position:0% -31Px;
        }
        #tabsE #current a span {
                background-position:100% -31px; color:#b28c34;
        }
PHP:
  <div id="tabsE">
   <ul>
<!-- CSS Tabs -->
<li><a href=".$file_location."?am=1&t=1><span>Tab 1</span></a></li>
<li><a href=".$file_location."?am=2&t=1><span>Tab 2</span></a></li>
<li id="current"><a href=".$file_location."?am=3&t=1><span>Tab 3</span></a> </li>
<li><a href=".$file_location."?am=4&t=1><span>Tab 4</span></a></li>
 
</ul>
 
</div>

           
         

Start your free trial to view this solution

Question Stats

Zone: Web Development

Question Asked By: needxpert

Question Asked On: 07.23.2008

Participating Experts: 2

Points: 500

Translate:

Loading Advertisement...

20080723-EE-VQP-34 / EE_QW_2_20070628