怎么让点击后,向后切换,而不是向前切换.

比如我点击"论坛",我想让"论坛"之后切换,现在是不管点击哪个都是按顺序执行的
<!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=GB2312">
<title>品牌直销--京东商城</title><style type="text/css">
p{display:none;}
ul{list-style:none;height:30px}
#menu li{float:left;padding:0 10px}
.cur{background:orange}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var conut = 0;
function change(menu,con){
var menu = $(menu).getElementsByTagName("a");
var con = $(con).getElementsByTagName("p");
for(var i=0; i<menu.length; i++){
menu[i].onclick = function(){
for(var j=0; j<menu.length; j++){
if(j != parseInt(this.rel-1)){
con[j].style.display = "none";
menu[j].className=""
}
}
con[parseInt(this.rel-1)].style.display = "block";
menu[parseInt(this.rel-1)].className="cur"; }
} } function autoChange(menu,con,n){
var menu = $(menu).getElementsByTagName("a");
var con = $(con).getElementsByTagName("p");
for(var k=0; k<menu.length; k++){
if(k == n){
menu[k].className="cur";
con[k].style.display = "block";
}
else{
menu[k].className="";
con[k].style.display = "none";
}
}
}
function autoScroll(){
autoChange("menu","con",conut)

conut+=1; if(conut == 5){
conut=0;
}
setTimeout("autoScroll()",2000);
}
window.onload = function(){
change("menu","con")
autoScroll();

}</script></head><body>
<div id="wrap">
<div id="menu">
<ul>
<li><a href="#" rel="1">电影</a></li>
<li><a href="#" rel="2">电视</a></li>
<li><a href="#" rel="3">音乐</a></li>
<li><a href="#" rel="4">论坛</a></li>
<li><a href="#" rel="5">产品</a></li>
</ul>
</div> <div id="con">
<p style="display:block">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div></body>
</html>

解决方案 »

  1.   

    切换函数加一个标识，链接click的onclick事件按顺序调用，change(1),change(2)。
    onload从1开始，点了就从标识处开始。
      

  2.   

    切换函数加一个标识，链接click的onclick事件按顺序调用，change(1),change(2)。
    onload从1开始，点了就从标识处开始。
      

  3.   


    <!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=GB2312">
    <title>品牌直销--京东商城</title><style type="text/css">
        p{display:none;}
        ul{list-style:none;height:30px}
        #menu li{float:left;padding:0 10px}
        .cur{background:orange}
    </style>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        var conut = 0;
        function change(menu,con){
            var menu = $(menu).getElementsByTagName("a");
            var con = $(con).getElementsByTagName("p");
            for(var i=0; i<menu.length; i++){
                menu[i].onclick = function(){
    conut=this.rel*1;//------------加了这一句
                    for(var j=0; j<menu.length; j++){
                        if(j != parseInt(this.rel-1)){
                            con[j].style.display = "none";
                            menu[j].className=""
                        }
                    }
                    con[parseInt(this.rel-1)].style.display = "block";
                    menu[parseInt(this.rel-1)].className="cur";            }
            }    }    function autoChange(menu,con,n){
            var menu = $(menu).getElementsByTagName("a");
            var con = $(con).getElementsByTagName("p");
            for(var k=0; k<menu.length; k++){
                    if(k == n){
                        menu[k].className="cur";
                        con[k].style.display = "block";
                    }
                    else{
                        menu[k].className="";
                        con[k].style.display = "none";
                    }
            }
        }
        function autoScroll(){
        autoChange("menu","con",conut)
        
            conut+=1;        if(conut == 5){
                conut=0;
            }
            setTimeout("autoScroll()",2000);
        }
        window.onload = function(){
            change("menu","con")
            autoScroll();
            
        }</script></head><body>
    <div id="wrap">
        <div id="menu">
            <ul>
                <li><a href="#" rel="1">电影</a></li>
                <li><a href="#" rel="2">电视</a></li>
                <li><a href="#" rel="3">音乐</a></li>
                <li><a href="#" rel="4">论坛</a></li>
                <li><a href="#" rel="5">产品</a></li>
            </ul>
        </div>    <div id="con">
            <p style="display:block">1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
        </div>
    </div>
    </body>
    </html>