# Unique CSS class for Group pages?

**URL:** <https://meta.discourse.org/t/unique-css-class-for-group-pages/40541>\
**Category:** UX\
**Created:** [2016 年 3 月 3 日午後 10:12 UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541 "2016-03-03T22:12:05Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![smrtey](https://avatars.discourse-cdn.com/v4/letter/s/db5fbb/32.png) [@smrtey](https://meta.discourse.org/u/smrtey)\
**Post date:** [2020 年 2 月 18 日午後 6:23 UTC](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541/8 "2020-02-18T18:23:55Z")

</div>

問題は、`getGroupInfo()` から `api.onPageChange(() => {` へ変数を渡す方法がわからなかったことです。

以下のコードは、クッキーを使ってこれを達成し、あなたが所属する任意のグループに対して、`div ID main` に `"name-of-current-group"` クラスを自動的に追加・削除します。

```plaintext
<script type="text/discourse-plugin" version="0.8">
        function getGroupInfo() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var myObj = JSON.parse(this.responseText);
                var groupName = myObj.group.name;
                if (groupName) {
                    document.getElementById("main").classList.add(groupName);
                    $.cookie('groupCookie', groupName, { expires: 7, path: '/' });
                }
            }
        };
        var url = window.location.href;
        xmlhttp.open("GET", url + ".json", true);
        xmlhttp.send();                
    }
    api.onPageChange(() =>{
        var group = $.cookie('groupCookie');
        document.getElementById("main").classList.remove(group);
        $.cookie('groupCookie', 'false', { expires: -1, path: '/' })
        getGroupInfo();
    });
</script>

```

---

_[View the full topic](https://meta.discourse.org/t/unique-css-class-for-group-pages/40541)._