0
私は初心者です。私はJavaScriptとHTMLとCSSを同時に学習しようとしています。私はナビゲーションバーを持つテストコードを書いており、メニューバーの項目のどれかをクリックすると、ページ内にテキストの段落が現れることを願っています。私は次のコードを書いたが、うまくいきません。私は私のコードは、選択に基づいてテキストを表示することができますどのようナビゲーションバーの項目を選択すると、ページにテキストが表示されます
body {
font-family: "Serif";
}
.background-image {
background: url("https://pbs.twimg.com/media/CXAOHDfWMAU2Zmi.jpg");
background-size: cover;
position: fixed;
background-repeat: no-repeat;
-webkit-filter:blur(3px) grayscale(50%);
-ms-filter:blur(3px) grayscale(50%);
filter:blur(3px) grayscale(50%);
width:100%;
height:100%;
}
.dropdown {
position: relative;
display: inline-block;
font-family: Lobster;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
#MyNavBar {
background-color:goldenrod;
}
#details {
background-color:goldenrod;
}
#subdetails {
background-color: gold;
}
details.html
<!DOCTYPE html>
<html>
<body>
<div id="Others">
<h2>This is Another thing</h2>
<p>This is a paragraph of textual information about <b>Another thing</b> that will blow your mind.</p>
</div>
<div id="Something">
<h2>This is Something</h2>
<p>This is a paragraph of textual information about <b>Something</b> that will blow your mind.</p>
</div>
</body>
</html>
index.css index.htmlを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--creating a navigation bar-->
<nav id="MyNavBar" class="navbar navbar-default">
<div class="container-fluid">
<ul id="details" class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Links
<b class="caret"></b>
</a>
<ul id="subdetails" class="dropdown-menu">
<li><a href="Something">Something</a></li>
<li><a href="Others">Another thing</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="background-image"></div>
<section id="content">
</section>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#MyNavBar ul li a').click(function(){
$('#content').load('details.html #' + $(this).attr('href'));
return false;
});
});
</script>
</body>
</html>
メニューの項目の
を追加し、コンテンツの残りの部分の後ろに
.background-imageを移動するには。たとえば、クリックイベントが確実に発生することを知っていますか？もしそうなら、jQueryセレクタが正しい要素を選択していることを知っていますか？もしそうなら、loadメソッドが期待したものを返すことを知っていますか？ – Seano666
@ Seano666クリックは何もしない、それが主な問題です。 – Dalek
'.background-image'に' z-index：-1'を加えても動作しません –