iT邦幫忙

1

js-做頁籤筆記記錄

html

<ul class="Menu clearfix">
  <li><a href="#tab1" class="curren">01</a></li>
  <li><a href="#tab2">02</a></li>  
  <li><a href="#tab3">03</a></li>
</ul>
<ul id="contents">
  <li id="tab1">Lorem ipsum dolor sit amet.</li>
  <li id="tab2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui ex maiores aliquam itaque commodi assumenda similique quam mollitia alias eum?</li>
  <li id="tab3">Lorem ipsum dolor sit amet consectetur adipisicing elit. .</li>
</ul>

js

$(document).ready(function (e){
  $('#contents li[id!=tab1]').hide();//將所有資料隱藏,除了第一個
  
  $('a').click(function(){//點擊後的動作
    $('#contents li').hide();//將所有資料隱藏
    console.log($(this).attr('href'));//取出值,本身已經在MENU的href埋下值了
    $($(this).attr('href')).show();//將埋下的值的資料顯示出來
    $('.curren').removeClass('curren');//原本MENU顯示刪除
    $(this).addClass('curren');//換成現在的MENU
    return false;
  });
});

codepen


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

2
dragonH
iT邦超人 5 級 ‧ 2019-10-04 13:25:46

有看到你 import bootstrap

bootstrap 裡面其實就有個類似的功能

哈,蠻快的..
目前想熟練一下js跟PHP
有空再摸摸看,感恩

dragonH iT邦超人 5 級 ‧ 2019-10-04 13:34:24 檢舉

/images/emoticon/emoticon12.gif

/images/emoticon/emoticon12.gif

我要留言

立即登入留言