2009-08-26 261 views
0

的背景顏色我有以下簡單的代碼在一個tagcloud詞/標籤:更改標籤雲

<a about="http://localhost/d456c6" href="http://localhost/d456c6" class="tagweight0 Resource">abda</a> 

我想改變一個詞的點擊背景。問題是,我不只有一個詞「tagweight0」。

這裏我jQuery的示例代碼:

$('tagweight0').livequery('click', function(event) { 
    $("tagweight0").toggleClass("select"); 
    return false; 
}); 

這是工作,但在點擊帶班「tagweight0」的所有單詞都與變更的背景。我怎樣才能改變背景只爲選定的單詞,而不是所有的標籤?

編輯:我可以使用「href」或「about」參數進行更改嗎?

回答

8
$('.tagweight0').live('click', function(event) { 
    $(this).toggleClass("select"); 
    return false; 
}); 
+0

現在的工作採取完整代碼;) – cupakob 2009-08-26 08:25:11

0

剛剛使用css怎麼樣?

a:active 
{ 
    background: #555555; 
} 
+0

不在此例) – cupakob 2009-08-26 08:27:41

+0

這是爲什麼不可能? – Natrium 2009-08-26 08:28:40

+0

我想要更改背景的不止一個單詞,而不僅僅是單擊事件期間。 – cupakob 2009-08-26 08:35:24

0

從AnyChart的背景變化

 <!doctype html> 
<html> 
<head> 
    <script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script> 
    <script src="https://cdn.anychart.com/samples-data/tag-cloud/population-by-countries/data.js"></script> 
    <link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
    html, body, #container { 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    .test{ 
    height: 20em; 
    border: 1px solid; 
    padding:0; 
    } 
    </style> 
</head> 
<body> 
<div class="col-md-12 "> 
<div class="col-md-4 test"><div id="container"></div></div><div class="col-md-4">hello2</div><div class="col-md-4">hello3</div> 
</div> 

    <script type="text/javascript"> 
anychart.onDocumentReady(function() { 
    // The data used in this sample can be obtained from the CDN 
    // https://cdn.anychart.com/samples-data/tag-cloud/population-by-countries/data.js 
    var data = getData(); 
    var dataSet = anychart.data.set(data); 
    var colors = anychart.scales.ordinalColor().colors(['#26959f', '#f18126', '#3b8ad8', '#60727b', '#e24b26']); 

    // create tag cloud 
    chart = anychart.tagCloud(); 
chart.background().fill({ 
     keys: ['#ccc'], 

}); 
    // set chart title 
    chart.title('World Population') 
    // set data with settings 
    .data(dataSet) 
    // set color scale 
    .colorScale(colors) 
    // set array of angles, by which words will be placed 
    .angles([-90, 0, 90]); 

    // get the color range 
    var colorRange = chart.colorRange(); 
    // enabled color range 
    colorRange 
    .enabled(true) 
    // sets color line size 
    .colorLineSize(15); 

    // set container id for the chart 
    chart.container('container'); 
    // initiate chart drawing 
    chart.draw(); 

    // save normal fill function to variable 
    var normalFillFunction = chart.normal().fill(); 
    // save hover fill function to variable 
    var hoveredFillFunction = chart.hovered().fill(); 

    // create custom interactivity to hover colorRange 
    chart.listen('pointsHover', function(e) { 
    if (e.actualTarget === colorRange) { 
     // if points exist 
     if (e.points.length) { 
     // set settings for normal state 
     chart.normal({ 
      fill: 'black 0.1' 
     }); 
     // set settings for hovered state 
     chart.hovered({ 
      // get fill color ratio by its number and set fill to hovered state 
      fill: chart.colorScale().valueToColor(e.point.get('category')) 
     }); 
     } else { 
     // set function for normal state 
     chart.normal({ 
      fill: normalFillFunction 
     }); 
     // set function for hovered state 
     chart.hovered({ 
      fill: hoveredFillFunction 
     }); 
     } 
    } 
    }); 
}); 
    </script> 
</body> 
</html>