当前位置: 代码迷 >> JavaScript >> javascript改变网页链接的实际有关问题
  详细解决方案

javascript改变网页链接的实际有关问题

热度:293   发布时间:2012-03-23 12:06:21.0
javascript改变网页链接的实际问题
是这样的,网页上有4个链接,名称分别为1,2,3,4

其中1,2,3链接指向#(即空)但是有onclick触发js事件,4链接指向test.php

现在要用js来做到如下效果,点击1,使4这个链接的地址改成test.php?link=1

,点击2,使4这个链接的地址改成test.php?link=2,但是先点1,再点2,链接就要改成test.php?link=1,2  
要是只点击3的话,4的地址就变成test.php?mode=1,要是先点1,再点2,再点3的话,地址就会变成test.php?link=1,2&mode=1

不会写,急求点播,希望能多给点注释

------解决方案--------------------
<Script Language="javascript">
var Type="";
var ID="";
function Sel(m) {
Type=Type+m;

if(Type=='1')
{ID="link=1";}
else if(Type=='2')
{ID="link=2";}
else if(Type=='12')
{ID="link=1,2";}
else if(Type=='3')
{ID="mode=1";}
else if(Type=='123')
{ID="link=1,2&mode=1";}
var hh="test.php?"+ID;
//把4的地址就变成hh就行了
}
</Script>

1,2,3链接得onclick事件都调用Sel(m)方法分别是:Sel(1),Sel(2),Sel(3)


------解决方案--------------------
哈哈,楼主很逗,不晓得为啥实现这样的业务操作,不觉得很烦人嘛,那要是点了1,再点3,再点2再点1,我点点点,点N多次又是啥样子的呢,哈哈。。。我姑且相信只有一次的说法吧,我也简单写下吧:其实你这个将所有的跳转放到JS中去完成就很好解决了,非要用href去连接也行,我就尝试下吧:

HTML code

<html>
    <body>
        <a href="javascript:addUrl('key1')">连接1,哈哈,你点击这里你的URL就变长了点点,试试看</a><br/>
        <a href="javascript:addUrl('key2')">连接2,哈哈,你点击这里你的URL又会变长了点点,不信你就试试看</a><br/>
        <a href="javascript:addUrl('key3')">连接3,哈哈,你点击这里你的URL会变更长了,不信我就自杀</a><br/>
        <a href="test.php" id="link4" target="_blank">连接4(就是你要来回变那个玩意)</a>
    </body>

    <script language="javascript">
        function tempObj(pori,keyinfo) {
            this.pori = pori;    //前缀表达式
            this.keyinfo = keyinfo;//值信息存储
            this.isUsed = "0";//该对象是否已经使用,若使用变成1,初始化为0
            this.getPori = function() {
                return this.pori;
            }
            this.getKeyinfo = function() {
                return this.keyinfo;
            }
            this.getIsUsed = function() {
                return this.isUsed;
            }
            this.setIsUsed = function(isUsed) {
                this.isUsed = isUsed;
            }
        }

        var addInfo = {
                    "key1":new tempObj("link=","1"),
                    "key2":new tempObj("link=","2"),
                    "key3":new tempObj("mode=","3")
                    };
        var nowInfo = {"beginUrl":"test.php"};
        var nowSize = 1;
    
        function addUrl(key) {
            var obj = addInfo[key];
            if(obj.getIsUsed() == "1") {
                alert("这个连接啦,URL不会因为你这个连接变化啦,已经增加过了,不要在点啦,在点就报警啦,哈哈。。。");
                return;
            }
            obj.setIsUsed("1");//设置该节点已经被使用
            if(nowSize == 1) {
                nowInfo[obj.getPori()] = "?"+obj.getPori()+obj.getKeyinfo();
                getUrlObj().href = getUrlObj().href + nowInfo[obj.getPori()];
            }else {
                var needUri = nowInfo[obj.getPori()];
                if(needUri == undefined) {//没有找到相同前缀的URL
                    nowInfo[obj.getPori()] = "&" + obj.getPori()+obj.getKeyinfo();
                    getUrlObj().href = getUrlObj().href + nowInfo[obj.getPori()];
                }else {
                    getUrlObj().href = getUrlObj().href.replace(needUri,needUri+","+obj.getKeyinfo());
                    nowInfo[obj.getPori()] = needUri+","+obj.getKeyinfo();
                }
            }
            nowSize ++;
            showUrl();
        }

        function getUrlObj() {
            return document.getElementById("link4");
        }

        function showUrl() {
            alert("现在的URL变成了:"+getUrlObj().href);
        }
    </script>
</html> 
  相关解决方案