# JS-下拉式選單OR頁籤做法
範例CODE網址：https://stackblitz.com/edit/js-6fhevo?file=index.js
## html 部分code
``` html=
<select class="select"> // 下拉式選單code
<option value="col-sm-1">col-sm-1</option>
<option value="col-sm-2">col-sm-2</option>
<option value="col-sm-3">col-sm-3</option>
<option value="col-sm-4">col-sm-4</option>
</select>
```
``` html=
//卡片樣式 共有四種 這是第一種
<div class="bg-primary text-white card">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
</div>
</div>
```
## JS
``` javascirpt=
$('.btn').on('click', () => { //按下按鈕的時候會發生什麼事
console.log('click!');
$('.card').removeClass('col-sm-1 col-sm-2 col-sm-3 col-sm-4'); //抓值刪除原本的樣式
let select = $('.select').val(); //宣告變數取代抓值
$('.card').addClass(select); // 新增樣式
});
```
{"metaMigratedAt":"2023-06-16T04:04:13.257Z","metaMigratedFrom":"Content","title":"JS-下拉式選單OR頁籤做法","breaks":true,"contributors":"[{\"id\":\"59029f5b-08ba-4aaa-b70e-e21a1bc56f96\",\"add\":1047,\"del\":5}]"}