change class

<ole>

Prøv at vise den kode, browseren ser  ;o)

Derudover er det sjældent en særlig god idé at skifte CSS-klasse, da det performer elendigt - MS fraråder det således eksplicit. Det er langt mere effektivy at skifte de enkelte properties på elementets style object

/mvh
</bole>

Det må være den her:



<div id="content">
       
            <script type="text/javascript">
// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');

// if false, we'll float all the panels left and fix the width
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });
 
  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('ul.navigation a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ?
  $container.css('paddingTop') :
  $container.css('paddingLeft'))
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow
 
  // can be a selector which will be relative to the target
  items: $panels,
 
  navigation: '.navigation a',
 
  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'img.left',
  next: 'img.right',
 
  // allow the scroll effect to run both directions
  axis: 'xy',
 
  onAfter: trigger, // our final callback
 
  offset: offset,
 
  // duration of the sliding effect
  duration: 500,
 
  // easing - can be used with the easing plugin:
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};

// apply serialScroll to the slider - we chose this plugin because it
// supports// the indexed next and previous scroll along with hooking
// in to our navigation.
$('#slider').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger
// the effect
$.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position,
// setting the duration to 1 because I don't want it to scroll in the
// very first page load.  We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});

</script>
<div id="slider">

    <div class="scroll">
        <div class="scrollContainer">
                    <script type="text/javascript">
            $(document).ready(function() {
                $('div.imageShadow').shadow({ color: "#444", offset: 7, opacity: 0.2 });
            });
        </script>
        <script type="text/javascript">
            var Lst;
                function CngClass(obj){
                if (typeof(obj)=='string') obj=document.getElementById(obj);
                if (Lst) Lst.className='thumbs';
                obj.className='thumbsSelected';
                Lst=obj;
            }
        </script>
        <div class="panel" id="1"><a href="#1" id="1">
            <div class="imageShadow"><img src="../../pernillevang/images/galleri/galleri1.jpg" alt="" height="471"/></div></a></div><div class="panel" id="2"><a href="#2" id="2">
            <div class="imageShadow"><img src="../../pernillevang/images/galleri/galleri2.jpg" alt="" height="471"/></div></a></div><div class="panel" id="7"><a href="#7" id="7">
            <div class="imageShadow"><img src="../../pernillevang/images/galleri/galleri7.jpg" alt="" height="471"/></div></a></div><div class="panel" id="6"><a href="#6" id="6">
            <div class="imageShadow"><img src="../../pernillevang/images/galleri/galleri6.jpg" alt="" height="471"/></div></a></div><div class="panel" id="5"><a href="#5" id="5">
            <div class="imageShadow"><img src="../../pernillevang/images/galleri/galleri5.jpg" alt="" height="471"/></div></a></div><div class="panel" id="8"><a href="#8" id="8">
            <div class="imageShadow"><img src="../../pernillevang/images/galleri/galleri8.jpg" alt="" height="471"/></div></a></div><div class="panel" id="9"><a href="#9" id="9">
            <div class="imageShadow"><img src="../../pernillevang/images/galleri/galleri9.jpg" alt="" height="471"/></div></a></div><div class="panel" id="10"><a href="#10" id="10">
            <div class="imageShadow"><img src="../../pernillevang/images/galleri/galleri10.jpg" alt="" height="471"/></div></a></div>            <div class="panel" id="filler"><img src="../../pernillevang/images/galleri/filler.png" alt="" height="471px"/></div>
        </div>
    </div>
</div>
<div class="placeringThumbs">
    <div class="thumbNavigation">
            <div class="thumbs" id="1" onclick="CngClass(this)" ><a href="#1" ><img src="../../pernillevang/images/galleri/galleri1.jpg" height="50" alt="" title="Flot billede" /></a></div><div class="thumbs" id="2" onclick="CngClass(this)" ><a href="#2" ><img src="../../pernillevang/images/galleri/galleri2.jpg" height="50" alt="" title="Smukt" /></a></div><div class="thumbs" id="7" onclick="CngClass(this)" ><a href="#7" ><img src="../../pernillevang/images/galleri/galleri7.jpg" height="50" alt="" title="lækkert billede" /></a></div><div class="thumbs" id="6" onclick="CngClass(this)" ><a href="#6" ><img src="../../pernillevang/images/galleri/galleri6.jpg" height="50" alt="" title="nice pic" /></a></div><div class="thumbs" id="5" onclick="CngClass(this)" ><a href="#5" ><img src="../../pernillevang/images/galleri/galleri5.jpg" height="50" alt="" title="godt billede" /></a></div><div class="thumbs" id="8" onclick="CngClass(this)" ><a href="#8" ><img src="../../pernillevang/images/galleri/galleri8.jpg" height="50" alt="" title="super flot" /></a></div><div class="thumbs" id="9" onclick="CngClass(this)" ><a href="#9" ><img src="../../pernillevang/images/galleri/galleri9.jpg" height="50" alt="" title="nice" /></a></div><div class="thumbs" id="10" onclick="CngClass(this)" ><a href="#10" ><img src="../../pernillevang/images/galleri/galleri10.jpg" height="50" alt="" title="super skarp" /></a></div>    </div>
</div><div class="subMenuPlaceringGalleri">
                <table cellpadding="0" cellspacing="0"><tr><td class="subvMenuCurrent" onmouseover="this.style.cursor='pointer';" onclick="window.location='?page=galleri&amp;subpage=portraet'; ">PORTRÆT</td><td class="subVMenuTd" onmouseover="this.style.cursor='pointer';" onclick="window.location='?page=galleri&amp;subpage=born'; ">BØRN</td><td class="subVMenuTd" onmouseover="this.style.cursor='pointer';" onclick="window.location='?page=galleri&amp;subpage=mode'; ">MODE</td><td class="subVMenuTd" onmouseover="this.style.cursor='pointer';" onclick="window.location='?page=galleri&amp;subpage=styling'; ">STYLING FOTO</td></tr></table>               
            </div>
               
        </div>
   
    </div>

vil du give eksempel på hvad du mener jeg skal gøre i stedet for at skifte css class?

Du kan se det sidste eksempel i denne guide:
    http://www.eksperten.dk/guide/227

- men jeg er ikke sikker på, du kan bruge det til jQuery. Mange scripts, der bygger på jQuery bruger (ligesom jQuery selv) uhensigtsmæssig og invalid kode - og derfor bygger en del scripts også på klasseskift

det giver mig samme problem, jeg kan godt bruge det til mine thumbs, men jeg aner ikke hvordan det skrives for at virke på de store billeder

fandt en løsning ændrede id på mine thumbs til t+id og kaldte det med onclick på mine store billeder.. :)

et sidste spørgsmål, med den metode der er beskrevet i artiklen hvordan ændrer man så stylen tilbage igen når der klikkes på et nyt a tag?
Og forresten smid et svar begge to..

    <head>
    <script type="text/JavaScript">
    var myStyles = {
        "color": "yellow",
        "backgroundColor": "red",
        "fontWeight": "bold",
        "fontStyle": "italic"
    };

    function setStyles(elm) {
        for ( x in myStyles ) {
            elm.style[x] = myStyles[x];
        }
    }
    </script>
    </head>
    <body>
   
    <div onclick="setStyles(this)" >... Klik her ...</div ><br>
    <div onclick="setStyles(this)" >... Klik her1 ...</div >
   
   
    </body>

lukker