JavaScript仿标签式浏览器

本帖最后由 a550759049 于 2009-06-30 14:55:27 编辑

解决方案 »

  1.   

    AJAX读写.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript仿标签式浏览器</title>
    <style type="text/css">
    .div{ border-bottom:1px solid gray; background:#f5f5f5; margin:5px; padding:5px;}
    .td{ border-right:1px solid gray; width:80px; height:15px; background:white;}
    .a{ border:1px #E6F7FF solid; background:white; padding:2px; cursor:pointer;}
    .span{ font-weight:bold; color:red; cursor:pointer;}
    </style>
    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script language="javascript">
    // 创建标签和内容
    function WindowBrowser_Create(title, url)
    {
        WindowBrowser_CreateTitle(title, url);
        WindowBrowser_CreateContent(title, url);
    }// 创建标签
    function WindowBrowser_CreateTitle(title, url)
    {
        var table = document.getElementById("t"); 
        var td = document.createElement("td"); 
        td.innerHTML = "<span class=\"span\" onclick=\"WindowBrowser_Change(this)\">"+title+"</span> <span class=\"span\" onclick=\"WindowBrowser_Delete(this)\">×</span>"; 
        td.className = "td";
        table.rows[0].appendChild(td);
        WindowBrowser_Change(td);
    }// 创建内容
    function WindowBrowser_CreateContent(title, url)
    {
        var table = document.getElementById("s");
        var tr = table.insertRow(table.rows.length-1);
        var td = tr.insertCell(0);
    var html = $.get(url,function(data){td.innerHTML=data;})
    }// 删除标签和内容
    function WindowBrowser_Delete(e)
    {
        var table = document.getElementById("t"); 
        var cellIndex = e.parentNode.cellIndex;
        WindowBrowser_DeleteContent(cellIndex-1);    
        for(var i=0; i<table.rows.length; i++)
        {
            table.rows(i).deleteCell(cellIndex); 
        }
    }// 删除内容
    function WindowBrowser_DeleteContent(id)
    {
        document.getElementById("s").deleteRow(id);
    }// 选择标签
    function WindowBrowser_Change(e)
    {
        var l = document.getElementById("s").rows.length;
        for(var i=0; i<l; i++)
        {
            //alert("当前选中的标签："+e.parentNode.cellIndex+"\r总显示长度："+l+"\r当前显示长度："+i+"\r当前显示长度内容："+document.getElementById("s").rows(i).innerText);
            document.getElementById("s").rows(i).style.display = (e.parentNode.cellIndex-1 == i) ? "block" : "none";
        }
    }
    </script>
    </head><body>
    <div>
    <a class="a" onclick="WindowBrowser_Create('百度', 'http://www.baidu.com/')">baidu</a>
    <a class="a" onclick="WindowBrowser_Create('网易', 'http://www.163.com/')">163</a>
    <a class="a" onclick="WindowBrowser_Create('谷歌', 'http://www.google.com.cn/')">google</a>
    </div>
    <div class="div">
    <table id="t">
      <tr>
        <td class="td">&nbsp;</td>
      </tr>
    </table>
    </div>
    <div>
    <table id="s">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    </div>
    </body>
    </html>