通過鏈接div class替換

我正在尋找通過鏈接使用javascript替換DIV使用的類。通過鏈接div class替換

CSS：

#container { 
    width: 176px; 
    height: 250px; 
    margin: 0 auto 0 auto; 
    padding: 0; 
} 
#wrapper { 
    width: 176px; 
    height: 250px; 
    margin: 0 auto 0 auto; 
    padding: 0; 
} 
.sprite { 
    background-image: url(sprite1.png); 
    background-repeat: no-repeat; 
    display: block; 
} 

.sprite-caramel { 
    width: 176px; 
    height: 250px; 
    background-position: 0 0; 
} 

.sprite-chocolate { 
    width: 176px; 
    height: 250px; 
    background-position: -176px 0; 
} 

.sprite-empty { 
    width: 176px; 
    height: 250px; 
    background-position: -352px 0; 
} 

.sprite-strawberry { 
    width: 176px; 
    height: 250px; 
    background-position: -528px 0; 
} 

.sprite-vanilla { 
    width: 176px; 
    height: 250px; 
    background-position: -704px 0; 
}

HTML：

<html> 

<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 

<body> 
<div id="container" class="sprite sprite-empty"></div> 
<ul id="wrapper"> 
    <li><a href="#">Chocolate</a></li> 
    <li><a href="#">Vanilla</a></li> 
    <li><a href="#">Strawberry</a></li> 
</ul> 
</body> 

</html>

我想點擊來交換類指定的類時，DIV下面的鏈接表示鏈接。所以在默認情況下，div應該顯示類「sprite sprite-empty」，然後當你點擊「巧克力」鏈接時，div類變成「sprite-sprite-chocolate」等。

任何幫助表示讚賞（我是全新的精靈和沒有Java expierence）。

雪碧使用：http://puu.sh/3otqm.png

來源

2013-06-26 Meta

就像我之前發佈的問題，在這裏它是

HTML

<div id="container" class="sprite sprite-empty"></div> 
    <ul id="wrapper"> 
     <li><a href="#" class="flavor" data-flavor="chocolate">Chocolate</a></li> 
     <li><a href="#" class="flavor" data-flavor="vanilla">Vanilla</a></li> 
     <li><a href="#" class="flavor" data-flavor="strawberry">Strawberry</a></li> 
    </ul> 
</body>

數據 - *屬性是HTML 5完全有效的。

Java腳本 - 需要的jQuery

jQuery(document).on("ready", function() { 
    jQuery('.flavor').bind('click', function(e) { 
     jQuery('#container').attr('class', 'sprite sprite-' + jQuery(this).data('flavor')); 
     e.stopPropagation(); 
    }); 
});

演示

是的，the demo。

來源

2013-06-26 03:08:11

哪個「之前的問題」？ OP沒有jQuery標籤。如果是這樣，你應該解釋flavor類和data屬性的用法，並提供一個停止傳播的理由。 – RobG

@RobG，我指的是這個問題：http://stackoverflow.com/questions/17310489/sprite-image-replacement-via-link –

使用這個jQuery（需要引用jQuery庫）

<script type="text/javascript"> 
    $(function() { 
     $("#wrapper a").on("click", function() { 
      var selected_sprite = $(this).data("sprite"); 
      $("#container").attr("class", "sprite " + selected_sprite); 
     }); 
    }); 
</script>

然後將數據屬性添加到每個鏈接是這樣的：

<ul id="wrapper"> 
    <li><a href="#" data-sprite="sprite-chocolate">Chocolate</a></li> 
    <li><a href="#" data-sprite="sprite-vanilla">Vanilla</a></li> 
    <li><a href="#" data-sprite="sprite-strawberry">Strawberry</a></li> 
</ul>

這應該做的伎倆。

來源

2013-06-26 03:13:01 Ricketts

通過鏈接div class替換

回答

相關問題