html Webページでタブを使うときのjQueryの一例
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Webページでタブを使うときのjQueryの一例相关的知识，希望对你有一定的参考价值。
$(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);
});
});
<!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>
以上是关于html Webページでタブを使うときのjQueryの一例的主要内容，如果未能解决你的问题，请参考以下文章
python 例えば，时间轴と属性を持つデータをに集计したいとき，巨蟒では大熊猫を使うと年ごとに集计した値をある属性でピボットしたデータフレームを得ることが简単にできます。これが，年ごとに都度累计した
markdown ログインシェルを変えてからshellモジュールを使うと命令未找到エラー
html 安卓の铬で表示したときのタブの色を设定する。
php 单ページでターム别で表示を切り替える
php 170324フォトギャラリーページでのエラー
javascript タブ切り替え中でheight-line，谷歌地图を使う