我有以下代码:https://jsfiddle.net/ox5xq082/
<!doctype html>
<html>
<head>
<title>Profile</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="javascript/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<style>
body { padding-top:80px; word-wrap:break-word; }
</style>
</head>
<body>
<div class="container">
<div class="page-header text-center">
<h1><span class="fa fa-anchor"></span> Profile Page</h1>
</div>
<div class="row">
<!-- LOCAL INFORMATION -->
<div class="col-sm-3">
<div class="well">
<h3><span class="fa fa-user"></span> User Info </h3>
<p>
<strong>id</strong>: <%= user._id %><br>
<strong>email</strong>: <%= user.local.email %><br>
<strong>Username</strong>: <%= user.local.username %><br>
<strong>Country</strong>: <%= user.local.country %><br>
<strong>Region</strong>: <%= user.local.region %><br>
<hr>
<strong>Food</strong>: <%= user.local.inventory.food %><br>
<strong>Energy Drinks</strong>: <%= user.local.inventory.energyDrinks %><br>
<hr>
<strong>Eur</strong>: <%= user.local.budget.eur.toFixed(2) %><br>
<strong>Gold</strong>: <%= user.local.budget.gold.toFixed(2) %><br>
<strong>Silver</strong>: <%= user.local.budget.silver.toFixed(3) %><br>
<hr>
<strong>Estate</strong>: <% if (user.local.estate.movedIn === true) { %>
Owned
<% } else if (user.local.estate.rented.movedIn === true) { %>
Renting from <%= user.local.estate.rented.rentedFrom %>
<% } else { %>
No Office Owned or Rented
<% } %><br>
<hr>
<strong>Energy</strong>: <%= user.local.energy.toFixed(2) %>%<br>
</p>
<hr>
<button id="shop" class="btn btn-primary">Shop</button>
<button id="duel" class="btn btn-primary">Duel</button>
<a href="/logout" class="btn btn-danger btn-sm">Logout</a>
</div>
</div>
<!-- Center Page -->
<div id="center-div" class="col-md-9">
<div class="container">
default content
<div id="duel-window" style="width=100% height=100%"> duel content
<span id="pp_close" class="glyphicon glyphicon glyphicon-remove"></span>
</div>
<div id="shop-window" style="width=100% height=100%"> shop content
<span id="pp_close" class="glyphicon glyphicon glyphicon-remove"></span>
</div>
<div>
</div>
</div>
</div>
<script>
$('#duel').click(function() {
$('#duel-window').css("display","block")
});
$('#shop').click(function() {
$('#shop-window').css("display","block")
});
</script>
</body>
</html>
样式.css
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#user-info {
float: left;
display: none;
}
#center-div {
background-color: #f5f5f5;
border: #e3e3e3;
height : 595px;
}
#duel-window {
display:none;
}
#shop-window {
display:none;
}
#pp_close {
position: absolute;
top: 0px;
right: 0px;
color: red;
font-size: 25px;
}
我希望能够只更改 center-div 容器的内容。如果我按下商店按钮，它应该变成商店内容，当我按下决斗时，它应该变成决斗内容。当我按下 pp_close 按钮时，它应该返回到默认内容。我将如何实现这一目标？
最佳答案
如果您有很多按钮并且想要更简洁的代码，请按照以下步骤操作
HTML:
- 添加 pp-close 类并在 ppCloses 上设置不同的 id
- 为每个按钮添加一个名为
content-trigger的类来绑定(bind)点击事件 - 为每个按钮添加一个名为
target-id的自定义属性，该属性保留目标内容元素 id(target-id="#duel-window")。 - 将您的每个内容添加到一个名为
avalible-content的类中
您的 html 应该如下所示:
<button id="shop" target-id="#shop-window" class="btn btn-primary content-trigger">Shop</button>
<button id="duel" target-id="#duel-window" class="btn btn-primary content-trigger">Duel</button>
<div class="container">
default content
<div id="duel-window" class="avalible-content" style="width=100% height=100%"> duel content
<span id="pp_close" class="glyphicon glyphicon glyphicon-remove pp-close"></span>
</div>
<div id="shop-window" class="avalible-content" style="width=100% height=100%"> shop content
<span id="pp_close1" class="glyphicon glyphicon glyphicon-remove pp-close"></span>
</div>
<div>
</div>
JS:
- 使用
show() 和 hide()来显示或隐藏元素。 - 使用
.content-trigger选择器一次绑定(bind)所有按钮onclick - 使用
target-id属性显示相应的内容 使用
$(".avalible-content").hide();在显示新内容之前隐藏所有内容。$(".pp-close").click(function() { $("#shop-window").hide(); $('#duel-window').hide(); }); $(".content-trigger").click(function(e) { $(".avalible-content").hide(); var target = $(e.currentTarget).attr("target-id"); $(target).show(); });
CSS:将#pp_close1 添加到 css
#pp_close,#pp_close1 {
position: absolute;
top: 0px;
right: 0px;
color: red;
font-size: 25px;
}
工作样本 HERE
关于jquery - onclick 更改/恢复容器内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37630053/