在单击选项卡式项目时隐藏和创建另一个对象 - HTML CSS

Hiding and creating another object on clicking tabbed items - HTML CSS

本文关键字：创建 一个对象 CSS HTML 隐藏 选项 单击 项目      更新时间：2023-09-26

我正在尝试创建一个简单的页面，当我单击一个选项卡式项目时，该页面的显示应该消失。在这个简单的代码中，当我单击"关于"时，应该让产品下拉菜单消失。这是代码 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Drop Down Navbar</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span12">
            <h3>Bootstrap Dropdown Menu By Creativity-Tuts</h3>
                <div class="navbar">
                    <div class="navbar-inner">
                        <ul class="nav">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                        </ul>
                    </div>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Products <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Prod 1</a></li>
                        <li><a href="#">Prod 2</a></li>
                        <li><a href="#">Prod 3</a></li>
                        <li><a href="#">Prod 4</a></li>
                        </ul>
                    </li>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我是否要使用onClick并调用函数来隐藏该下拉菜单？这是jsfiddle链接

将id添加到«about»链接，然后使用以下代码：

$('#about').click(function(){
  $('.dropdown-menu').hide();
});
相关文章：