SOURCE

cola(function (model) {
            model.action({
                change: function (self, arg) {
                    var name = "card" + self.get("caption");
                    cola.widget("book").setCurrent(name)

                }
            })
        });

<container>
    <c-buttongroup>
        <c-button caption="1" state="active" click="change"></c-button>
        <c-button caption="2" click="change"></c-button>
        <c-button caption="3" click="change"></c-button>
        <c-button caption="4" click="change"></c-button>
    </c-buttongroup>
    <c-cardbook id="book">
        <item name="card1" class="active">
            1
        </item>
        <item name="card2">
            2
        </item>
        <item name="card3">
            3
        </item>
        <item name="card4">
            4
        </item>
    </c-cardbook>
</container>

container {
            display: block;
            height: 600px;
            width: 400px;
        }

        c-cardbook > item {
            padding: 20px;
            height: 500px;
            border: 1px solid #e6e6e6;
            font-size: 48px;
        }