Javascript img赢得'后的段落；t扩展
我有一个有3个h1标签，3个img标签和3个p标签的页面 从一开始，每个p标记都设置为显示：无； 当我点击h1标签时，我想要展开（切换）img后面的p。 这是我的代码：Javascript img赢得'后的段落；t扩展,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个有3个h1标签，3个img标签和3个p标签的页面 从一开始，每个p标记都设置为显示：无； 当我点击h1标签时，我想要展开（切换）img后面的p。 这是我的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> *{text-align: center; padding: 10px; c
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{text-align: center;
padding: 10px;
color: orange;
font-family:Georgia;
}
img{
display: inline-block;
margin: auto;
border:2px solid black;
border-radius: 21px 0px 21px 0px;
background-color: black;
}
body{
background-color: brown;
}
p{
display: none;
font-size: 24px;
}
h1:hover{
background-color: black;
}
h1{
border:2px solid blue;
border-radius:5px;
}
#top{box-shadow: 10px 10px 5px #888888;
padding: 20px;
display: inline-block;
border-radius: 5px;
border: 2px double #6495ED;
background-color: #BCD2EE;
height: 50px;
width: 120px;
margin: auto;
text-align: center;
color: black;
font-weight: bold;
}
#click{
color: #eed5ad;
border:0px;
}
#click:hover{background-color: transparent;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("h1").click(
function(){
$("> img >p",this).show();
});
});
</script>
<title>Αξιοθέατα</title>
</head>
<body>
<h1 id="click">Κάντε κλικ σε έναν νομό</h1>
<img src="http://www.golden-greece.gr/maps/kriti.jpg" usemap="#nomoi">
<map name="nomoi">
<area shape="poly" coords="184,99,168,154,5,126,13,2,201,10," href="http://www.chania.gr/" alt="xania" target="new">
<area shape="poly" coords="320,83,268,176,176,150,188,101,319,85,," href="http://www.rethimno.gr/" alt="rethimno" target="new">
<area shape="poly" coords="448,117,432,140,464,201,281,227,271,179,273,172,287,166,293,144,305,150,320,132,315,118,324,88,330,81,351,91,444,117," href="http://www.heraklion.gr/" alt="heraklion" target="new">
<area shape="poly" coords="632,115,631,195,467,204,450,118,509,104,539,149,569,138,629,115," href="http://www.lasithinews.gr/" alt="lasithi" target="new">
</map>
<h1>Ελούντα</h1><br>
<img src="http://says.gr/wp-content/uploads/2013/03/%CE%B5%CE%BB%CE%BF%CF%85%CE%BD%CF%84%CE%B1%CE%842.jpg" alt="Ελούντα" height="60%" width="60%">
<p>
Η Ελούντα είναι ένα ψαροχώρι του νομού Λασιθίου στην βόρεια ακτή του νησιού της Κρήτης που αποτελεί μέρος του του Άγίου Νικολάου . Είναι παραθαλάσσιος και δημοφιλής τουριστικός προορισμός. Σε μεγάλο βαθμό την επισκέπτονται VIPs για τα παραθαλάσσια θέρετρα πολυτελείας . Απέναντι της βρίσκεται ένα νησί πόλυ μικρό που ονομάζεται Σπιναλόγκα που περικλείεται βόρεια από τον κόλπο της Ελούντας . Ο δρόμος πρός την Ελούντα από τον Άγιο Νικόλαο βρίσκεται περίπου 12 χιλιόμετρα σε μήκος ακολουθόντας την ακτή , καθώς ανεβαίνει προς την κορυφή ενός μικρού βουνού . Το μικρό χώριο της Πλάκας (Λασίθι) , με θέα το νησί της Σπιναλόγκας απέχει μόλις 5 χλμ. από την κεντρική πλατεία της Ελούντας κατευθυνόμενοι βόρεια μακριά από τον Άγιο Νικόλαο . Οι κάτοικοι της ζούσαν τις οικογένειές τους από τη γεωργία, το ψάρεμα, την παραγωγή αλατιού στις ενετικές αλυκές και την εξόρυξη της ακονόπετρας.
</p>
<h1>Ιστορία</h1>
<p>
Στην Ελούντα οι πρώτες καταγράφες οικισμού ήταν η αρχαία πόλη της Ολούς της οποίας οι κάτοικοι ήταν σε σύγκρουση με τους κατοίκους της Ντοριαν Λατώ . Το μεγαλύτερο μέρος της Ολούς ήταν αναγεννημένο από την θάλασσα και είναι ακόμη ορατά τα σημάδια κατά την κατάδυση στον κόλπο της Ελούντας. Άπο τις αρχές του 1900 έφευγαν άπο το λιμανάκι βαρκούλες που μετέφεραν τους λεπρούς στην κατοικία της Σπιναλόγκας .
</p>
<a href="#click">
<div id="top">
Κορυφή
</div></a>
</body>
</html>
*{文本对齐：居中；
填充：10px；
颜色：橙色；
字体系列：格鲁吉亚；
}
img{
显示：内联块；
保证金：自动；
边框：2件纯黑；
边界半径：21px 0px 21px 0px；
背景色：黑色；
}
身体{
背景颜色：棕色；
}
p{
显示：无；
字体大小：24px；
}
h1：悬停{
背景色：黑色；
}
h1{
边框：2件纯蓝；
边界半径：5px；
}
#顶盒阴影：10px 10px 5px#8888888；
填充：20px；
显示：内联块；
边界半径：5px；
边框：2倍双色#6495ED；
背景色：#BCD2EE；
高度：50px；
宽度：120px；
保证金：自动；
文本对齐：居中；
颜色：黑色；
字体大小：粗体；
}
#点击{
颜色：#eed5ad；
边界：0px；
}
#单击：悬停{背景色：透明；}
$（文件）。准备好了吗(
函数（）{
$（“h1”）。单击(
函数（）{
$（“>img>p”，this.show（）；
});
});
Αξιοθέατα
Κάντε κλικ σε έναν νομό
下面是一个JSIDLE:只需将您的js修改为：
$(document).ready(function(){
$("h1").click(function(){
$(this).nextAll('p').eq(0).toggle();
});
});
请检查。只需将您的js修改为：
$(document).ready(function(){
$("h1").click(function(){
$(this).nextAll('p').eq(0).toggle();
});
});
请检查。在所有情况下，
imgp在所有情况下，在
imgp@jQueryAngryBird您需要的一切都在上面。这是提问的正确方式。你能改变html吗？如果你能将每个“部分”（标题、图像、平行图形）放入单独的容器中，比如div，那会非常干净。我必须保持这种结构。你能澄清一下你需要什么吗？当前
$（“p”）.show（）$（“p”）.show（）