Cái này có xử lý được bằng HTML không nhỉ?

bluetea · 24/05/2010

Cái này có xử lý được bằng HTML không nhỉ?

Mình muốn làm cái này:
Ví dụ mình có đoạn text như hình 1, khi click vào một trong những dòng đó, thì nó tự động xổ ra 1 đoạn text nữa, như hình 2, mà ko mở cửa sổ mới.
Hình 1:

Hình 2:

Liệu dùng HTML có xử lý được không nhỉ? Nếu được, chỉ cho mình cách làm được không. Mình cảm ơn nhiều.

anhminhk42 · 24/05/2010

HTML thuần túy thì chịu rồi. bạn phải dùng XML thôi:
Tham khảo đoạn code này nhé:

de;1 đã viết:

de id=quote>
<p>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></p>
<p><font face="Verdana" size="2"><script type="text/javascript">
var switchcontent_ajax_msg=''<em>Loading Ajax content...</em>''
var switchcontent_ajax_bustcache=true
function switchcontent(className, filtertag){
this.className=className
this.collapsePrev=false
this.persistType="none"
this.filter_content_tag=(typeof filtertag!="undefined")? filtertag.toLowerCase() : ""
this.ajaxheaders={}
}
switchcontent.prototype.setStatus=function(openHTML, closeHTML){
this.statusOpen=openHTML
this.statusClosed=closeHTML
}
switchcontent.prototype.setColor=function(openColor, closeColor){
this.colorOpen=openColor
this.colorClosed=closeColor
}
switchcontent.prototype.setPersist=function(bool, days){
if (bool==true){
if (typeof days=="undefined")
this.persistType="session"
else{
this.persistType="days"
this.persistDays=parseInt(days)
}
}
else
this.persistType="none"
}
switchcontent.prototype.collapsePrevious=function(bool){
this.collapsePrev=bool
}
switchcontent.prototype.setContent=function(index, filepath){ //PUBLIC: Set path to ajax content for corresponding header based on header index
this.ajaxheaders["header"+index]=filepath
}
switchcontent.prototype.sweepToggle=function(setting){ //PUBLIC: Expand/ contract all contents method. (Values: "contract"|"expand")
if (typeof this.headers!="undefined" && this.headers.length>0){ //if there are switch contents defined on the page
for (var i=0; i<this.headers.length; i++){
if (setting=="expand")
this.expandcontent(this.headers) //expand each content
else if (setting=="contract")
this.contractcontent(this.headers) //contract each content
}
}
}
switchcontent.prototype.defaultExpanded=function(){ //PUBLIC: Set contents that should be expanded by default when the page loads (ie: defaultExpanded(0,2,3)). Persistence if enabled overrides this setting.
var expandedindices=[] //Array to hold indices (position) of content to be expanded by default
//Loop through function arguments, and store each one within array
//Two test con***ions: 1) End of Arguments array, or 2) If "collapsePrev" is enabled, only the first entered index (as only 1 content can be expanded at any time)
for (var i=0; (!this.collapsePrev && i<arguments.length) || (this.collapsePrev && i==0); i++)
expandedindices[expandedindices.length]=arguments
this.expandedindices=expandedindices.join(",") //convert array into a string of the format: "0,2,3" for later parsing by script
}
//PRIVATE: Sets color of switch header.
switchcontent.prototype.togglecolor=function(header, status){
if (typeof this.colorOpen!="undefined")
header.style.color=status
}
//PRIVATE: Sets status indicator HTML of switch header.
switchcontent.prototype.togglestatus=function(header, status){
if (typeof this.statusOpen!="undefined")
header.firstChild.innerHTML=status
}
//PRIVATE: Contracts a content based on its corresponding header entered
switchcontent.prototype.contractcontent=function(header){
var innercontent=document.getElementById(header.id.replace("-title", "")) //Reference content container for this header
innercontent.style.display="none"
this.togglestatus(header, this.statusClosed)
this.togglecolor(header, this.colorClosed)
}
//PRIVATE: Expands a content based on its corresponding header entered
switchcontent.prototype.expandcontent=function(header){
var innercontent=document.getElementById(header.id.replace("-title", ""))
if (header.ajaxstatus=="waiting"){//if this is an Ajax header AND remote content hasn''t already been fetched
switchcontent.connect(header.ajaxfile, header)
}
innercontent.style.display="block"
this.togglestatus(header, this.statusOpen)
this.togglecolor(header, this.colorOpen)
}
// -------------------------------------------------------------------
// PRIVATE: toggledisplay(header)- Toggles between a content being expanded or contracted
// If "Collapse Previous" is enabled, contracts previous open content before expanding current
// -------------------------------------------------------------------
switchcontent.prototype.toggledisplay=function(header){
var innercontent=document.getElementById(header.id.replace("-title", "")) //Reference content container for this header
if (innercontent.style.display=="block")
this.contractcontent(header)
else{
this.expandcontent(header)
if (this.collapsePrev && typeof this.prevHeader!="undefined" && this.prevHeader.id!=header.id) // If "Collapse Previous" is enabled and there''s a previous open content
this.contractcontent(this.prevHeader) //Contract that content first
}
if (this.collapsePrev)
this.prevHeader=header //Set current expanded content as the next "Previous Content"
}
// -------------------------------------------------------------------
// PRIVATE: collectElementbyClass()- Searches and stores all switch contents (based on shared class name) and their headers in two arrays
// Each content should carry an unique ID, and for its header, an ID equal to "CONTENTID-TITLE"
// -------------------------------------------------------------------
switchcontent.prototype.collectElementbyClass=function(classname){ //Returns an array containing DIVs with specified classname
var classnameRE=new RegExp("(^|\s+)"+classname+"($|\s+)", "i") //regular expression to screen for classname within element
this.headers=[], this.innercontents=[]
if (this.filter_content_tag!="") //If user defined limit type of element to scan for to a certain element (ie: "div" only)
var allelements=document.getElementsByTagName(this.filter_content_tag)
else //else, scan all elements on the page!
var allelements=document.all? document.all : document.getElementsByTagName("*")
for (var i=0; i<allelements.length; i++){
if (typeof allelements.className=="string" && allelements.className.search(classnameRE)!=-1){
if (document.getElementById(allelements.id+"-title")!=null){ //if header exists for this inner content
this.headers[this.headers.length]=document.getElementById(allelements.id+"-title") //store reference to header intended for this inner content
this.innercontents[this.innercontents.length]=allelements //store reference to this inner content
}
}
}
}
//PRIVATE: init()- Initializes Switch Content function (collapse contents by default unless exception is found)
switchcontent.prototype.init=function(){
var instanceOf=this
this.collectElementbyClass(this.className) //Get all headers and its corresponding content based on shared class name of contents
if (this.headers.length==0) //If no headers are present (no contents to switch), just exit
return
//If admin has changed number of days to persist from current cookie records, reset persistence by deleting cookie
if (this.persistType=="days" && (parseInt(switchcontent.getCookie(this.className+"_dtrack"))!=this.persistDays))
switchcontent.setCookie(this.className+"_d", "", -1) //delete cookie
// Get ids of open contents below. Four possible scenerios:
// 1) Session only persistence is enabled AND corresponding cookie contains a non blank ("") string
// 2) Regular (in days) persistence is enabled AND corresponding cookie contains a non blank ("") string
// 3) If there are contents that should be enabled by default (even if persistence is enabled and this IS the first page load)
// 4) Default to no contents should be expanded on page load ("" value)
var opencontents_ids=(this.persistType=="session" && switchcontent.getCookie(this.className)!="")? '',''+switchcontent.getCookie(this.className)+'','' : (this.persistType=="days" && switchcontent.getCookie(this.className+"_d")!="")? '',''+switchcontent.getCookie(this.className+"_d")+'','' : (this.expandedindices)? '',''+this.expandedindices+'','' : ""
for (var i=0; i<this.headers.length; i++){ //BEGIN FOR LOOP
if (typeof this.ajaxheaders["header"+i]!="undefined"){ //if this is an Ajax header
this.headers.ajaxstatus=''waiting'' //two possible statuses: "waiting" and "loaded"
this.headers.ajaxfile=this.ajaxheaders["header"+i]
}
if (typeof this.statusOpen!="undefined") //If open/ closing HTML indicator is enabled/ set
this.headers.innerHTML=''<span class="status"></span>''+this.headers.innerHTML //Add a span element to original HTML to store indicator
if (opencontents_ids.indexOf('',''+i+'','')!=-1){ //if index "i" exists within cookie string or default-enabled string (i=position of the content to expand)
this.expandcontent(this.headers) //Expand each content per stored indices (if ""Collapse Previous" is set, only one content)
if (this.collapsePrev) //If "Collapse Previous" set
this.prevHeader=this.headers //Indicate the expanded content''s corresponding header as the last clicked on header (for logic purpose)
}
else //else if no indices found in stored string
this.contractcontent(this.headers) //Contract each content by default
this.headers.onclick=function(){instanceOf.toggledisplay(this)}
} //END FOR LOOP
switchcontent.dotask(window, function(){instanceOf.rememberpluscleanup()}, "unload") //Call persistence method onunload
}
switchcontent.prototype.rememberpluscleanup=function(){
var opencontents=new Array("none")
for (var i=0; i<this.innercontents.length; i++){
if (this.persistType!="none" && this.innercontents.style.display=="block" && (!this.collapsePrev || (this.collapsePrev && opencontents.length<2)))
opencontents[opencontents.length]=i
this.headers.onclick=null
}
if (opencontents.length>1)
opencontents.shift()
if (typeof this.statusOpen!="undefined")
this.statusOpen=this.statusClosed=null //Cleanup code
if (this.persistType=="session") //if session only cookie set
switchcontent.setCookie(this.className, opencontents.join(",")) //populate cookie with indices of open contents: classname=1,2,3,etc
else if (this.persistType=="days" && typeof this.persistDays=="number"){ //if persistent cookie set instead
switchcontent.setCookie(this.className+"_d", opencontents.join(","), this.persistDays) //populate cookie with indices of open contents
switchcontent.setCookie(this.className+"_dtrack", this.persistDays, this.persistDays) //also remember number of days to persist (int)
}
}
switchcontent.dotask=function(target, functionref, tasktype){
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}
switchcontent.connect=function(pageurl, header){
var page_request = false
var bustcacheparameter=""
if (window.ActiveXObject){
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else if (window.XMLHttpRequest)
page_request = new XMLHttpRequest()
else
return false
page_request.onreadystatechange=function(){switchcontent.loadpage(page_request, header)}
if (switchcontent_ajax_bustcache)
bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open(''GET'', pageurl+bustcacheparameter, true)
page_request.send(null)
}
switchcontent.loadpage=function(page_request, header){
var innercontent=document.getElementById(header.id.replace("-title", ""))
innercontent.innerHTML=switchcontent_ajax_msg
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
innercontent.innerHTML=page_request.responseText
header.ajaxstatus="loaded"
}
}
switchcontent.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return ""
}
switchcontent.setCookie=function(name, value, days){
if (typeof days!="undefined"){
var expireDate = new Date()
var expstring=expireDate.setDate(expireDate.getDate()+days)
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()
}
else
document.cookie = name+"="+value
}
</script></font></p>
<div id="content">
<div id="col_main">
<ul class="blue_square">
<li>
<div class="hand" id="cau02-title" style="color: black"><font face="Verdana" color="#ff0000" size="2">
Hỏi : <a name="cau_hoi_2">Các dịch vụ đang được cung cấp trên Mobile
Banking bao gồm những gì?</a></font></div>
<div class="the_scb_link" id="cau02" style="display: none"><font face="Verdana" color="#0000ff" size="2">
Trả lời:</font>
<p><font face="Verdana" color="#ff0000" size="2">-      </font><font face="Verdana" color="#0000ff" size="2">
Nạp tiền cho thuê bao di động trả trước. Áp dụng trên cả 3 mạng di động
Vinaphone, MobiFone, Viettel.</font></p>
<p><font face="Verdana" color="#0000ff" size="2">-     
Trả cước cho thuê bao di động trả sau: Hiện tại áp dụng cho thuê bao di động
MobiFone.</font></p>
</div>
</li>
<li>
<div class="hand" id="cau03-title" style="color: black"><font face="Verdana" color="#ff0000" size="2">
Hỏi: <a name="cau_hoi_3">Mật khẩu sử dụng giao dịch Mobile Banking là gì?</a></font></div>
<div class="the_scb_link" id="cau03" style="display: none"><font face="Verdana" color="#0000ff" size="2">
Trả lời:</font>
<p><font face="Verdana" color="#ff0000" size="2">      </font><font face="Verdana" color="#0000ff" size="2">
 Mật khẩu quy định từ 6 đến 9 ký tự số do Quý khách tự chọn khi nhắn tin
kích hoạt dịch vụ. Yêu cầu Quý khách bảo mật mật khẩu của mình dể tránh bị
lợi dụng và xóa các tin nhắn đã gửi thành công.</font></p>
</div>
</li>
<li>
<div class="hand" id="cau04-title" style="color: black"><font color="#ff0000"><font face="Verdana" size="2">
Hỏi: <span lang="pt-br"><strong style="font-weight: 400">Bằng dịch vụ
Mobile Banking của GP.Bank tôi có thể nạp tiền các mệnh giá nào? Có thể
nạp bao nhiêu lần trong một ngày?</strong></span></font></font></div>
<div class="the_scb_link" id="cau04" style="display: none"><font color="#0000ff"><font face="Verdana" size="2"><u>
Trả lời:</u><br />
-      GP.Bank cung cấp các mệnh giá sau:
30.000, 50.000, 100.000, 200.000 và 500.000 đ.</font></font>
<p><font face="Verdana" color="#0000ff" size="2">-     
Để đảm bảo an toàn cho tài khoản của Quý khách, hạn chế trường hợp bị lợi
dụng GP.Bank quy định khách hàng được nạp tối đa 3.000.000đ     
hoặc 6 lần/ngày/1 thuê bao đăng ký.    </font></p>
</div>
</li>
</ul>
<p><font face="Verdana" size="2"><script type="text/javascript">var bobexample=new switchcontent("the_scb_link", "div");bobexample.setColor(''darkred'', ''black'');bobexample.setPersist(true);bobexample.collapsePrevious(true);bobexample.init()</script></font></p>
</div>
</div>

Click để xem thêm...

milee · 25/05/2010

html+css là được

lehaos · 28/05/2010

Có nhiều cách, dễ nhất là html + script + css
hoặc html + XML

Cái này có xử lý được bằng HTML không nhỉ?

bluetea Thành viên rất tích cực

anhminhk42 Thành viên rất tích cực

milee Thành viên mới

lehaos Thành viên mới

Chia sẻ trang này

Cái này có xử lý được bằng HTML không nhỉ?

bluetea Thành viên rất tích cực

anhminhk42 Thành viên rất tích cực

milee Thành viên mới

lehaos Thành viên mới

Chia sẻ trang này

Tìm kiếm hữu ích