Question

我有以下代码：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>

的style.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按钮时，它应该返回默认内容。我怎么做到这一点？

Answer 1

试试这个..

$(document).ready(function(){
    $('#shop').on('click',function(){
        $('#shop-window').show();
        $('#dual-window').hide();
    })
    $('#dual').on('click',function(){
        $('#shop-window').hide();
        $('#dual-window').show();
    })
})

＆＃13;

$(document).ready(function(){
$('#shop').on('click',function(){
		$('#shop-window').show();
    $('#dual-window').hide();
})
$('#dual').on('click',function(){
		$('#shop-window').hide();
    $('#dual-window').show();
})
})

＆＃13;

.formValidateError {
    color:#FF0000;  /* red */
}
.formValidateValid {
    color:#00CC00; /* green */
	
}

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;
}

＆＃13;

<!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://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
		<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>
		<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>

＆＃13;

Answer 2

如果您有许多按钮并想要更清晰的代码，请按照以下步骤操作

HTML：

添加pp-close类并在ppCloses上设置不同的ID
为每个按钮添加一个名为<Link>的类来绑定点击事件
为每个按钮添加一个名为content-trigger的自定义属性，用于保留目标内容元素ID（target-id）。
为您的每个内容添加一个名为target-id="#duel-window"

你的HTML应该看起来像这样：

avalible-content

JS：

使用<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>来显示或隐藏元素。
使用show() and hide()选择器立即绑定所有按钮
使用.content-trigger属性显示相应的内容
使用target-id隐藏所有内容，然后再显示新内容。
```
$(".avalible-content").hide();
```

CSS：将＃pp_close1添加到css

 $(".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();
 });

工作样本HERE

onclick更改/恢复容器内容

2 个答案: