單擊閱讀更多按鈕時隱藏另一個頁面的ID

我有一個描述頁面並在其中閱讀更多按鈕（4個相同的div）。當閱讀更多按鈕被點擊時，它將直接進入顯示所有4個div的完整描述的頁面。當更多特定的div被點擊我要直接與所有內容的頁面，但是卻只能顯示特定div的完整描述，並隱藏其他的div描述單擊閱讀更多按鈕時隱藏另一個頁面的ID

HTML代碼

one.html

<html> 
<head> 
<script type="text/javascript"> 
$(document).ready(function() 
$(".a1 a").click(function() 
$("#a2_bio").hide(); 
$("#a3_bio").hide(); 
$("#a4_bio").hide(); 
}); 
}); 
</script> 
</head> 

<body> 
<style type="text/css"> 
p 
{ 
font-size:12px; 
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
text-align:center; 
} 
.a1, .a2, .a3, .a4 
{ 
width:300px;height:200px;float:left; 
margin-left:30px; 
border:1px dotted #CCCCCC; 
padding:1px; 
background:#CCC; 
} 
.images 
{ 
width:100px; 
height:75px; 
margin:0 auto; 
border:1px #666 solid; 
margin-top:30px; 
background:#C36;  
} 

.a1 a, .a2 a, .a3 a, .a4 a 
{ 
float:right; 
margin-right:10px; 
width:75px; 
height:20px; 
font-size:11px; 
color:#060; 
} 
</style> 

<div class="a1"> 
<div class="images"> </div> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
<a href="two.html#a1_bio"> Read more </a> 
</div> 

<div class="a2"> 
<div class="images"> </div> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
<a href="two.html#a2_bio"> Read more </a> 
</div> 

<div class="a3"> 
<div class="images"> </div> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
<a href="two.html#a3_bio"> Read more </a> 
</div> 

<div class="a4"> 
<div class="images"> </div> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
<a href="two.html#a4_bio"> Read more </a> 
</div> 

</body> 
</html>

two.html

<html> 
<body> 
<style type="text/css"> 
#a1_bio, #a2_bio, #a3_bio, #a4_bio 
{ 
width:800px; 
height:200px; 
background:#CCC; 
border:#666 1px solid; 
margin-bottom:20px !important; 
float:none; 
margin:0 auto; 
} 

#a1_bio p, #a2_bio p, #a3_bio p, #a4_bio p 
{ 
font-size:12px; 
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
} 
</style> 
<div id="a1_bio"> 
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
</div> 

<div id="a2_bio"> 
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
</div> 

<div id="a3_bio"> 
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
</div> 

<div id="a4_bio"> 
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
</div> 

</body> 
</html>

來源

2014-01-22 Shareer

如果符合您的要求，以便其他用戶可以獲得幫助，您可以接受該答案。 –

更新我的代碼檢查它... – Manoj

試試這個代碼：

DEMO

JS：

var hashes = window.location.hash; 
$(hashes).show();

CSS：

#a1_bio, #a2_bio, #a3_bio, #a4_bio 
    { 
    width:800px; 
    height:200px; 
    background:#CCC; 
    border:#666 1px solid; 
    margin-bottom:20px !important; 
    float:none; 
    margin:0 auto; 
    display:none; 
    }

來源

2014-01-22 06:10:30 Manoj

我需要將JS放在two.html中的ready函數中嗎？ – Shareer

是的..看到演示..幷包括jquery插件.. – Manoj

您可以嘗試使用下面的JS在準備（在two.html，默認隱藏所有div ，並在one.html中使用url：two.html？url = a2_bio）：

function getUrlVars() { 
    var vars = {}; 
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,  
    function(m,key,value) { 
     vars[key] = value; 
    }); 
    return vars; 
} 
var divId = getUrlVars()["url"]; 
$('#'+divId).show();

來源

2014-01-22 06:13:16

我試了上述。但不幸的是它不工作:( – Shareer

我可以知道你正在得到什麼錯誤或你已經嘗試過嗎？ –

看到小提琴的相同：http://jsfiddle.net/dipali_vasani/LPsTT/ –

單擊閱讀更多按鈕時隱藏另一個頁面的ID

回答

相關問題