SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change ID of LI element onclick

    I have 4 tabs created using the unordered list items.

    I am using SPRY framework to switch the tab content.

    I need to create and overlapped tab structure using the <li> tags.

    My question is -
    1. How do I assign an ID="firstcurrent" when first <li> is clicked
    2. An ID of "current" to the 2nd and 3rd <LI>
    3. and ID of "lastcurrent" when last <li> is clicked.

    I could change the class of the links but the CSS I am using for overlapped tabs: kind of limits me to do so.

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ID's are unique. You can't have two elements with the same ID.

    Change the class name instead.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Get rid of the current class and you can have a structure that's more widely usable.

    Code html4strict:
    <body id="aboutus">
    <ul class="aboutus">
        <li class="first">...</li>
        <li>...</li>
        <li>...</li>
        <li class="last">...</li>
    </ul>
    </body>

    Then you can use css selectors to target different parts

    Code css:
    /* affects all first list items */
    ul li.first {
       ...
    }
    /* affect the aboutus list only when on the aboutus page */
    #aboutus ul.aboutus {
       ...
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    This article covers the above technique quite nicely.
    http://www.sitepoint.com/article/navigation-using-css/3
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all your replies so far.

    I agree that ID's should be unique.

    1. My first LI will have ID = "firstcurrent" when clicked
    2. Last LI will have ID = "lastcurrent" when clicked
    3. I will assign a class="current" to all the LI's in between

    Here is what I have so far -

    HTML code -

    Code:
      <ul id="myList" class="TabbedPanelsTabGroup" >
        <li class="first" tabindex="0"><a>Quick Links</a></li>
        <li tabindex="0"><a>Our Goals</a></li>
        <li tabindex="0"><a>Our Products</a></li>
        <li class="last" tabindex="0"><a>Why Jackson</a></li>
      </ul>
    CSS -
    Code:
    <style type="text/css">
    
    
    .TabbedPanels{
    float: left;
    width: 900px;
    background: url(images/tabs/bg_TabbedPanels.jpg) no-repeat;
    }
    
    .TabbedPanels ul{
    list-style-type: none;
    margin: 0;
    padding: 20px 20px 0 20px;
    }
    
    .TabbedPanels ul li{
    float: left;
    margin: 0 0px 0 0;
    background: url(images/tabs/navtab.gif) no-repeat right top;
    outline: 0; /* added to remove border from tabs in FF */
    cursor: pointer;
    }
    
    .TabbedPanels ul li a{
    display: block;
    padding: 8px 48px 8px 10px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    }
    
    .TabbedPanels ul li a:hover{
    text-decoration: underline;
    }
    
    .TabbedPanels ul li.first a{
    padding: 8px 48px 8px 39px;
    background: url(images/tabs/navtab_first.gif) no-repeat;
    }
    
    .TabbedPanels ul li.last{
    background: url(images/tabs/navtab_last.gif) no-repeat right top;
    }
    
    .TabbedPanels ul li.last a{
    padding: 8px 39px 8px 10px;
    }
    
    .TabbedPanels ul li#firstcurrent{
    background: #fff url(images/tabs/navtab_current.gif) no-repeat right top;
    }
    
    .TabbedPanels ul li#firstcurrent a{
    background: url(images/tabs/navtab_current_first.gif) no-repeat;
    color: #000;
    }
    
    .TabbedPanels ul li.current{
    margin-left: -38px;
    background: #fff url(images/tabs/navtab_current.gif) no-repeat right top;
    }
    
    .TabbedPanels ul li.current a{
    padding: 8px 48px;
    background: url(images/tabs/navtab_current_left.gif) no-repeat;
    color: #000;
    }
    
    .TabbedPanels ul li#lastcurrent{
    margin-left: -38px;
    background: #fff url(images/tabs/navtab_current_last.gif) no-repeat right top;
    }
    
    .TabbedPanels ul li#lastcurrent a{
    padding: 8px 39px 8px 48px;
    background: url(images/tabs/navtab_current_left.gif) no-repeat;
    color: #000;
    }
    
    .TabbedPanelsContentGroup {
    	clear: both;
    	background-color: #FFFFFF;
    }
    Javascript -
    Code:
    <script type="text/javascript">
    function init() {
    // find the list
    var mylist = document.getElementById("myList");
    
    // get all list items within the list
    var listItems = mylist.getElementsByTagName("li");
    // set the class for the last list item
    
    var firstLI = listItems[listItems.length - 4] ;
    var secondLI =  listItems[listItems.length - 3] ;
    var thirdLI =  listItems[listItems.length - 2] ;
    var lastLI = listItems[listItems.length - 1] ;
    
    //lastLI.id = "lastcurrent";
    //firstLI.id = "firstcurrent" ;
    secondLI.className = "current";
    //thirdLI.className = "current" ;
    
    }
    //window.onload = init;
    </script>

    My tabs have to look exactly similar to the tabs in this article -

    http://www.wpdesigner.com/2007/06/20...rlapping-tabs/

    The CSS I am using is also in the above article.

    I am trying to convert the PHP code into javascript ??

    Do you all think that is a good idea ??


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •