【問01】
「変更」ボタンを押したら、p要素のテキストが変更するよう記述しなさい。【変更前】初めまして 【変更後】よろしくお願いします
【問02】
「変更」ボタンを押すたびに、p要素のテキストが繰り返して変更するよう記述しなさい。【変更前】初めまして 【変更後】よろしくお願いします
【問03】
body要素の高さを2000pxにし、400px以上スクロールしたら「topに戻る」ボタンが表示され、クリックするとスムーススクロールでページトップに戻るようにしなさい。
【問04】
日本語表記の会社情報と英語表記の会社情報を「日本語」「English」のタブで切り替えられるタブパネルを作成する 会社名：株式会社フェリカ企画 所在地：東京都豊島区南池袋2－12－9 KKビル４F 設立日：2000年1月1日 Company Name：Felica Co.,Ltd. Address：KK Bldg-4F, 2-12-9 Minamiikebukuro, Toshima-ku, Tokyo Establishment：Jan 1st, 2000a</dd>
タブパネルのソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jquery演習</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.container{
width: 600px;
margin: 50px auto 0;
display: flex;
}
#tab{
width: 100px;
height:150px;
}
#tab>li{
height: 75px;
border:1px solid #555;
}
#tab>li:nth-of-type(1){
border-bottom: 0;
}
#tab>li.active{
border-right: 0;
background-color: beige;
}
#tab a{
display: block;
text-align: center;
line-height: 75px;
color: #333;
}
.wrapper{
width: 500px;
height: 300px;
}
.box{
border: 1px solid #555;
border-left: 0;
padding: 10px;
height: 150px;
display: none;
}
.box.active{
display: block;
background-color: beige;
}
.box>h2{
text-align: center;
}
.box dt{
float: left;
width: 150px;
}
.box dd{
padding-left: 150px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$('#tab a').on('click',function(){
$(this).parent('li').addClass('active').siblings('li').removeClass('active');
var href=$(this).attr('href');
var href=$(href);
console.log(href);
href.addClass('active').siblings('.box').removeClass('active');
});
});
</script>
</head>
<body>
<p>日本語表記の会社情報と英語表記の会社情報を「日本語」「English」のタブで切り替えられるタブパネルを作成する
</p>
<div class="container">
<ul id="tab">
<li class="active"><a href="#ja">日本語</a></li>
<li><a href="#en">English</a></li>
</ul>
<div class="wrapper">
<div class="box active" id="ja">
<h2>会社情報</h2>
<dl>
<dt>会社名：</dt>
<dd>株式会社フェリカ企画</dd>
<dt>所在地：</dt>
<dd>東京都豊島区南池袋2－12－9 KKビル４F</dd>
<dt>設立日：</dt>
<dd>2000年1月1日</dd>
</dl>
</div>
<div class="box" id="en">
<h2>Company info</h2>
<dl>
<dt>Company Name：</dt>
<dd>Felica Co.,Ltd.</dd>
<dt>Address：</dt>
<dd>KK Bldg-4F, 2-12-9 Minamiikebukuro, Toshima-ku, Tokyo</dd>
<dt>Establishment：</dt>
<dd>Jan 1st, 2000</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
コメント