WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

タブパネル

その1

f:id:mmmmofu:20150528115300p:plain

http://efu.sakura.ne.jp/web/tab/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブパネル</title>
<script src="js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="css/style4.css">
</head>
<body>
<div id="container">
<ul class="tab">
<li><a href="#tab1" class="selected">JavaScript</a></li>
<li><a href="#tab2">CSS</a></li>
<li><a href="#tab3">HTML</a></li>
<li><a href="#tab4">jQuery</a></li>
<li><a href="#tab5">WordPress</a></li>
</ul>
<ul class="panel">
<li id="tab1">JavaScriptの内容が入る</li>
<li id="tab2">CSSの内容が入る</li>
<li id="tab3">HTMLの内容が入る</li>
<li id="tab4">jQueryの内容が入る</li>
<li id="tab5">WordPressの内容が入る</li>
</ul>
</div>
<script>
$(function(){
  $('ul.panel li:not('+$('ul.tab li a.selected').attr('href')+')').hide();

  $('ul.tab li a').click(function(){
    $('ul.tab li a.selected').removeClass('selected');
    $(this).addClass('selected');
    $('ul.panel li').hide();
    $($(this).attr('href')).show();
    return false;
  });
});
</script>
</body>
</html>

その2

f:id:mmmmofu:20150528115344p:plain

http://efu.sakura.ne.jp/web/tab/index2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<header>
<h1><img src="img/rogo.png" alt="tableware"></h1>
<ul id="nav">
<li><img src="img/menu1.png" alt="和食器"></li>
<li><img src="img/menu2.png" alt="洋食器"></li>
<li><img src="img/menu2.png" alt="ガラス食器"></li>
</ul><!-- /#nav -->
<ul id="tab">
<li><a href="#tab1">湯呑み</a></li>
<li><a href="#tab2" class="selected">急須</a></li>
<li><a href="#tab3">小鉢</a></li>
</ul><!-- /#tab -->
</header><!-- /header -->
<div id="content">
<section id="tab1">
<h2>YUNOMI</h2>
<img src="img/yunomi.jpg" alt="湯呑み画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
<section id="tab2">
<h2>KYUSU</h2>
<img src="img/kyusu.jpg" alt="急須画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
<section id="tab3">
<h2>KOBACHI</h2>
<img src="img/kobachi.jpg" alt="小鉢画像">
<p>モダンでおしゃれな食器です。和風で洗練された美しさがあります。シンプルなフォルムとマットな質感で贈り物にもおすすめです。モダンでおしゃれな食器です。和風で洗練された美しさがあります。</p>
</section>
</div><!-- /#content -->
<footer>
<p><small>Copyright (c) 2014 tableware All Right Reserved.</small></p>
</footer><!-- /#footer -->
<script>
$(function(){
  $('#content section:not('+$('ul#tab li a.selected').attr('href')+')').hide();
  $('ul#tab li a').mouseover(function(){
    $('ul#tab li a.selected').removeClass('selected');
    $(this).addClass('selected');
    $('#content section').hide();
    $($(this).attr('href')).fadeIn(800);
    return false;
  });
});
</script>
</body>
</html>

「.mouseover()」や「.mouseout()」はセレクターの子要素でも発生してしまい、
イベントが複数回起きる場合は
「.mouseenter()」「.mouseleave()」がよい

関連記事

mmmmofu.hatenablog.com