初歩的な質問ですが、教えてください。
タブの切り替えメニューを作成する前に、「tab1」以外の箇所を非表示にするのですが、
$('#contents div[id != "tab1"]').hide();
のtab1を「''」で囲んでいました。
「""」に変えたところ、表示できたのですが、
jQueryを書く際に、「''」と「""」の使い分けのルールがあるのでしょうか。
ネットで調べたら、どっちでもいいと書いてあり、よく理解できずにいます。
よろしくお願いします。
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>Lesson08</title> 6<link rel="stylesheet" href="css/reset.css"> 7<link rel="stylesheet" href="css/style.css"> 8<script src="js/jquery-2.1.4.min.js"></script> 9<script src="js/script.js"></script> 10</head> 11<body> 12<header> 13 <h1>Tab</h1> 14</header> 15<main> 16 <ul> 17 <li><a href="#tab1" class="current">01</a></li> 18 <li><a href="#tab2">02</a></li> 19 <li><a href="#tab3">03</a></li> 20 <li><a href="#tab4">04</a></li> 21 </ul> 22 <div id="contents"> 23 <div id="tab1"> 24 <p><strong>01</strong></p> 25 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 26 </div> 27 <div id="tab2"> 28 <p><strong>02</strong></p> 29 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 30 </div> 31 <div id="tab3"> 32 <p><strong>03</strong></p> 33 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 34 </div> 35 <div id="tab4"> 36 <p><strong>04</strong></p> 37 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 38 </div> 39 </div> 40</main> 41</body> 42</html>
css
1@charset "UTF-8"; 2 3body{ 4 font-family: Arial, sans-serif; 5 -webkit-font-smoothing: antialiased; 6 background:#E46E6E; 7} 8 9h1{ 10 padding:45px 0; 11 color:#C15757; 12 font-size:5em; 13 font-weight:bold; 14 text-align:center; 15} 16 17main{ 18 width:1000px; 19 margin:0 auto; 20 display:block; 21} 22 23ul li{ 24 float:left; 25 margin-right:1px; 26 list-style-type:none; 27} 28 29ul li a{ 30 font-size:2em; 31 font-weight:bold; 32 color:#FFF; 33 text-decoration:none; 34 display:block; 35 width:100px; 36 padding:15px 20px; 37 background:#C15757; 38} 39 40ul li a:hover{ 41 background:#D26161; 42 color:#FFF; 43} 44 45ul li a.current{ 46 background:#F5F4F2; 47 color:#C15757; 48} 49 50#contents{ 51 clear:both; 52 margin-bottom:150px; 53} 54 55#contents div{ 56 padding:30px 20px; 57 background:#F5F4F2; 58} 59 60#contents p{ 61 margin-top:20px; 62 line-height:2em; 63 color:#C15757; 64} 65 66#contents strong{ 67 font-size:4em; 68 font-weight:bold; 69 color:#D6AF62; 70}
jQuery
1$(function(){ 2 $('#contents div[id != "tab1"]').hide(); 3 4 return false; 5}); 6
javascriptをカラーリングしてくれるエディターを使ってみたら分かるかも
回答3件
あなたの回答
tips
プレビュー