Created
November 4, 2015 06:09
-
-
Save akkijp/0ebc7be1118948f4fcab to your computer and use it in GitHub Desktop.
Webページでタブを使うときのjQuery の一例
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <title>index.html</title> | |
| <script type="text/javascript" src="./js/index.js"></script> | |
| </head> | |
| <body> | |
| <header> | |
| <div id="nav"> | |
| <ul class="global_nav"> | |
| <li class="global_nav__list gl01"><a href="#">main menu1</a></li> | |
| <li class="global_nav__list gl04"><a href="#">main menu2</a></li> | |
| <li class="global_nav__list gl05"><a href="#">main menu3</a></li> | |
| </ul> | |
| <ul class="tab"> | |
| <li class="global_nav__list gl02">main menu4</li> | |
| <li class="global_nav__list gl03">main menu5</li> | |
| </ul> | |
| </div> | |
| <div class="global_nav_menu"> | |
| <div class="show hide"> | |
| <ul> | |
| <li class="gl02_sub01"><a href="#">sum menu4-1</a></li> | |
| <li class="gl02_sub02"><a href="#">sum menu4-2</a></li> | |
| <li class="close">close</li> | |
| </ul> | |
| </div> | |
| <div class="show hide"> | |
| <ul> | |
| <li class="gl03_sub01"><a href="#">sum menu5-1</a></li> | |
| <li class="gl03_sub02"><a href="#">sum menu5-2</a></li> | |
| <li class="gl03_sub03"><a href="#">sum menu5-3</a></li> | |
| <li class="gl03_sub04"><a href="#">sum menu5-4</a></li> | |
| <li class="close">close</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </header> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function() { | |
| $(".tab li").click(function(){ | |
| var index = $(".tab li").index(this); | |
| var $this = $(this); | |
| var close_all = function(){ | |
| $(".tab li").removeClass('select'); | |
| return $('.global_nav_menu .show') | |
| .data('selected', false) | |
| .hide(250); | |
| } | |
| var close_self = function(){ | |
| $this.removeClass('select'); | |
| return $('.global_nav_menu .show') | |
| .eq(index) | |
| .data('selected', false) | |
| .hide(250); | |
| } | |
| var open_self = function(){ | |
| $this.addClass('select'); | |
| return $('.global_nav_menu .show') | |
| .eq(index) | |
| .data('selected', true) | |
| .show(250) | |
| } | |
| var isOpened_self = function(){ | |
| return $('.global_nav_menu .show') | |
| .eq(index) | |
| .data('selected') | |
| } | |
| if(isOpened_self()){ // 既に選択されていない場合 | |
| close_self(); | |
| }else{ | |
| close_all().promise().done(function(){ | |
| open_self(); | |
| }); | |
| $this.addClass('select'); | |
| } | |
| }); | |
| $('.close').click(function() { | |
| $('.global_nav_menu .show').hide(250); | |
| $('.tab li').data('selected', false); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ポイントは、処理ごとに適切な関数名で処理を分ける事！