Question

我是初学者。我正在尝试同时学习JavaScript，HTML和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>

index.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>

如何让我的代码根据菜单中项目的选择显示文字？

Answer 1

更改此代码：

$('#content').load('details.html #' + $(this).attr('href'));

对此：

$('#content').load('details.html');

然后当你点击＆＃34;链接＆＃34;元素：

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    Links
    <b class="caret"></b>
</a>

它应该在您的部分

中加载details.html的内容

Answer 2

问题是"node": "6.6.0"目前落后于#content，因为.background-image为.background-image - 设置非position: fixed static会创建新的使用该元素堆叠上下文并为其指定默认值position，以使其显示在非z-index ed元素之上。

要将position移到其他内容后面，请添加.background-image

选择导航栏中的项目，然后在页面中显示文字

2 个答案: