Advanced Search

Results 1 to 2 of 2

Thread: Html change on click, change to another html when clicked again

  1. #1
    Join Date
    Nov 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Html change on click, change to another html when clicked again

    Not sure if this can be done.. My problem is simliar to this thread.
    http://www.dynamicdrive.com/forums/s...ad.php?t=22935

    But mine's a little different. Take a look at this picture.
    http://img140.imageshack.us/my.php?i...hunter1fs4.jpg

    I click the first underlined word and there's the chinese wording below all the underlined words. How can I do it when I click the second underlined word and the chinese wording below all the underlined words change to the second chinese underlined words? And so on..

    Anyone have any idea about it? Hope you get what I'm trying to say.
    Thanks alot.

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Hm.
    Code:
      <script type="text/javascript">
        var elementLinkGroup = (function() {
          var ElementLink = function(args) {
            this.id = args.shift();
            this.master = args.shift();
            this.slaves = args;
          };
    
          clickHandler = function(arr) {
            var n = arr.length - 1;
    
            return function() {
              for(var i = 0; i < arr.length; ++i)
                for(var j = 0; j < arr[i].slaves.length; ++j)
                  arr[i].slaves[j].style.display = (i === n ? "" : "none");
            };
          };
    
          return function() {
            var links = [];
    
            return function() {
              var args = Array.prototype.slice.call(arguments),
                show = args.pop();
    
              var e = new ElementLink(args);
              links.push(e);
    
              e.master.onclick = clickHandler(links);
              for(var i = 0; i < e.slaves.length; ++i)
                e.slaves[i].style.display = (show ? "" : "none");
    
              return e;
            };
          }
        })();
      </script>
    </head>
    <body>
      <div id="title1">Title1</div>
      <div id="title2">Title2</div>
      <div id="title3">Title3</div>
      <div id="zhongwen1">中文一</div>
      <div id="zhongwen2">中文二</div>
      <div id="zhongwen3">中文三</div>
      <script type="text/javascript">
        var grp = elementLinkGroup();
        grp(document.getElementById("title1"),
            document.getElementById("zhongwen1"),
            true);
        grp(document.getElementById("title2"),
            document.getElementById("zhongwen2"),
            false);
        grp(document.getElementById("title3"),
            document.getElementById("zhongwen3"),
            false);
      </script>
    Untested.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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
  •