专注于新元素

时间：2015-12-07 02:25:32

标签： javascript jquery html5 css3

好的，所以在我的网站上我想这样做，当我点击某个div时它会显示新的信息。例如，如果div文本说＆＃34;你叫什么名字？＆＃34;我希望能够点击它并说它＆＃34;我的名字是......＆＃34;。先感谢您。还只是一个注释，我不在乎我必须使用什么编程语言。

到目前为止，以下是我的所有文件。

＆＃13;
＆＃13; 
body {
	margin 0;
	padding 0;
	font-family: sans-serif, arial;
}



header {
	background: #00795f;
	width: 100%;
	padding: 40px 0;
	color: white;
	text-align: center;
}

a {
	text-decoration: none;
	color: inherit;
}

nav ul {
	background-color: #43a286;
	overflow: hidden;
	color: white;
	padding: 0;
	text-align: center;
	margin: 0;
	-webkit-transition: max-height 0.4s;
	-ms-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	-o-transition: max-height 0.4s;
	transition: max-height 0.4s;

}

nav ul li {
	display: inline-block;
	padding: 20px;
}

nav ul li:hover {
	background-color: #399077;
}

section {
	line-height: 1.5em;
	font-size: 0.9em;
	padding: 40px;
	width: 75%;
	margin: 0 auto;
}

.handle {
	width: 100%;
	background: #005c48;
	text-align: left;
	box-sizing: border-box;
	padding: 15px 10px;
	cursor: pointer;
	color: white;
	display: none;
}

@media screen and (max-width: 1080px) {
	nav ul {
		max-height: 0px;
	}

	.showing {
		max-height: 20em;
	}

	nav ul li {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		text-align: left;
		padding: 15px 10px;
		cursor: pointer;
	}

	.handle {
		display: block;
	}



}

.first-info {
	background-color: #43a286;
	height: 200px;
	width: 200px;
	border-radius: 20px;
}

.first-info-text {
	color: white;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	height: 200px;
	width: 200px;
	font-size: 20px;
	border-radius: 20px;
}

.first-info-text p {
	margin: 5px;
}

.first-info:hover {
	background-color: #399077;
	cursor: pointer;
} 

.first-info-text:hover {
	background-color: #399077;
	cursor: pointer;
} 

.switch {
	color: white;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	height: 200px;
	width: 200px;
	font-size: 20px;
	border-radius: 20px;
	display: none;
}

.first-info:focus { 

	.first-info-text {
		display: none;
	}

	.switch {
		display: all;
	}
}
＆＃13; 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Lorem Ipsum</title>
		<link rel="stylesheet" href="app.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<header>
			Lorem Ipsum
		</header>
		<nav>
			<ul>
				<a href="#"><li>Lorem </li></a>
				<a href="#"><li>Lorem</li></a>
				<a href="#"><li>Lorem</li></a>
				<a href="#"><li>Lorem</li></a>
				<a href="#"><li>Lorem</li></a>
				<a href="#"><li>Lorem</li></a>	
				<a href="#"><li>Lorem</li></a>
				<a href="#"><li></li>Lorem</a>
			</ul>
			<div class="handle">Menu</div>
		</nav>
		<section>
			<div class="first-info">
				<div class="first-info-text">
					<p>What is my name?</p>
					<div class="switch">
						<p>bob!</p>
					</div>
				</div>
			</div>
		</section>
		<script>
			$('.handle').on('click', function(){
				$('nav ul').toggleClass('showing');
			})
		</script>
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

希望这会有用

你不需要添加$（document）.ready（function（）{.....如果它是body标签的底部

JS 

$(document).ready(function(){
 $('#first-info').on('click', function(){
   $('nav ul').toggleClass('showing');
   $('.first-info-text').toggleClass('switch');
   }) 

})

我删除了p标记并添加了标记

的span标记

HTML 

<header>
            Lorem Ipsum
        </header>
        <nav>
            <ul>
                <a href="#"><li>Lorem </li></a>
                <a href="#"><li>Lorem</li></a>
                <a href="#"><li>Lorem</li></a>
                <a href="#"><li>Lorem</li></a>
                <a href="#"><li>Lorem</li></a>
                <a href="#"><li>Lorem</li></a>  
                <a href="#"><li>Lorem</li></a>
                <a href="#"><li></li>Lorem</a>
            </ul>
            <div class="handle">Menu</div>
        </nav>
        <section>
      <div class ="first-info" id="first-info">
        <span class='first-info-text'>What is your name</span>
        <span class='first-info-text msgInfo switch'>My name is Bob</span>
      </div>
    </section>

修改CSS 

body {
    margin 0;
    padding 0;
    font-family: sans-serif, arial;
}



header {
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}

a {
    text-decoration: none;
    color: inherit;
}

nav ul {
    background-color: #43a286;
    overflow: hidden;
    color: white;
    padding: 0;
    text-align: center;
    margin: 0;
    -webkit-transition: max-height 0.4s;
    -ms-transition: max-height 0.4s;
    -moz-transition: max-height 0.4s;
    -o-transition: max-height 0.4s;
    transition: max-height 0.4s;

}

nav ul li {
    display: inline-block;
    padding: 20px;
}

nav ul li:hover {
    background-color: #399077;
}

section {
    line-height: 1.5em;
    font-size: 0.9em;
    padding: 40px;
    width: 75%;
    margin: 0 auto;
}

.handle {
    width: 100%;
    background: #005c48;
    text-align: left;
    box-sizing: border-box;
    padding: 15px 10px;
    cursor: pointer;
    color: white;
    display: none;
}

@media screen and (max-width: 1080px) {
    nav ul {
        max-height: 0px;
    }

    .showing {
        max-height: 20em;
    }

    nav ul li {
        width: 100%;
        box-sizing: border-box;
        padding: 15px;
        text-align: left;
        padding: 15px 10px;
        cursor: pointer;
    }

    .handle {
        display: block;
    }



}

.first-info {
    background-color: #43a286;
    height: 200px;
    width: 200px;
    border-radius: 20px;
}

.first-info-text {
    color: white;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    width: 200px;
    font-size: 20px;
    border-radius: 20px;
}

.first-info-text p {
    margin: 5px;
}

.first-info:hover {
    background-color: #399077;
    cursor: pointer;
} 

.first-info-text:hover {
    background-color: #399077;
    cursor: pointer;
} 

.switch {
    color: white;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    width: 200px;
    font-size: 20px;
    border-radius: 20px;
    display: none;
}

.first-info:focus { }

.switch {
        visibility: hidden;
    }
}

你没有关闭这个css声明.first-info:focus

这是DEMO

相关问题
最新问题