发新贴  快速回复

JS锚点,跳转到另一个网页的问题~

comingforhelp
2015-07-07 13:51
之前有网友回复说用windows location hash值,不是非常明白,麻烦帮忙写一段,非常感谢!


 
莫涛
window.location.hash="#div1";
2015-07-07 14:42  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41006&ptid=13922
window.location.hash="#div1";

怪我笨,实在没琢磨出来,真是笨死了{:soso_e101:}
2015-07-09 21:29  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41006&ptid=13922
window.location.hash="#div1";

虽然管理员提示了,但是我实在是笨,没写出来到底怎么实现。{:soso_e110:}
2015-07-09 21:32  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41006&ptid=13922
window.location.hash="#div1";

在网页1的新闻3,我加了这段 <a href="javascript:window.location.hash='网页2.html#新闻3'"></a>,但是跳转后网页显示  “网页2.html#新闻3”字符,地址栏显示的是”网页1.html#网页2.html#新闻3“ ,也就是说明没有转到网页2,而是直接在网页1里面找网页2,所以失败了。


麻烦告知下,怎么修改,谢谢!

2015-07-14 19:53  回复本帖
comingforhelp
 本帖最后由 comingforhelp 于 2015-7-16 15:17 编辑 

感谢,解决了,谢谢
2015-07-16 14:02  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41218&ptid=13922
麻烦看下代码。

要求就是从page1的篮球,能够链接到page2的篮球,以此类推其他各个链接。普通的锚定位无 ...

<li><a href="page2.html#one6">• 篮球</a></li>
要跳到那一项就把#号后边的改成对应的id,这个id是你在page2页面上定义的那些。
page2加一段js代码

var oTab1=document.getElementById('Tab1');
var aLi=oTab1.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++){
    aLi[i].className='';
}
var hash=window.location.hash.substring(1);
if(hash){

   var active=document.getElementById(hash);
   active.className='hover'; 
}

2015-07-16 15:09  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41220&ptid=13922
• 篮球
要跳到那一项就把#号后边的改成对应的id,这个id是你在page2页面上定义的那些。
page2加一段 ...

非常非常感谢你,好用。

真的非常感谢。

好人一生平安。
2015-07-16 15:14  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41221&ptid=13922
非常非常感谢你,好用。

真的非常感谢。


看下妙味的视频吧,你这样写会有很多问题的。不易扩展,一旦改动会很麻烦。而且定义一堆id很麻烦,可以用其他方式解决的
2015-07-16 15:16  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41222&ptid=13922
看下妙味的视频吧,你这样写会有很多问题的。不易扩展,一旦改动会很麻烦。而且定义一堆id很麻烦,可以用 ...

好的,我捉摸下视频。

再次感谢。
2015-07-16 15:18  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41220&ptid=13922
• 篮球
要跳到那一项就把#号后边的改成对应的id,这个id是你在page2页面上定义的那些。
page2加一段 ...

发现个问题,

跳转过去没问题了,但是page2的右边内容显示不对。

比如我在page1点的是“篮球”,跳转到page2,左边菜单栏是“篮球”,后边还是显示的“要闻1”的内容。


2015-07-16 15:33  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41226&ptid=13922
发现个问题,

跳转过去没问题了,但是page2的右边内容显示不对。


刚才的改了一下代码如下if(hash){

   var n=hash.match(/\d+/)[0];
   var intro=document.getElementById('intro');
   var aDiv=intro.children;

   var active=document.getElementById(hash);

   for(var i=0;i<aDiv.length;i++){
    aDiv[i].style.display='none';
   }
   aDiv[n-1].style.display='block';
   active.className='hover'; 
}

这样的布局用起来会很麻烦,你看完基础课的视频之后会发现现在这样写简直就是浪费时间。。
2015-07-16 15:45  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41227&ptid=13922
刚才的改了一下代码如下if(hash){

   var n=hash.match(/\d+/)[0];


新的代码,加进去不起作用哦,麻烦再看下,谢谢。
2015-07-16 16:00  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41229&ptid=13922
新的代码,加进去不起作用哦,麻烦再看下,谢谢。
if(hash){

   var n=hash.match(/\d+/)[0];
   var intro=document.getElementById('intro');
   var aDiv=intro.children;

   var active=document.getElementById(hash);

   for(var i=0;i<aDiv.length;i++){
    aDiv[i].style.display='none';
   }
   aDiv[n-1].style.display='block';
   active.className='hover'; 
}
[i]把之前的替换掉,不是加在后边。这个测试过是可以的。
2015-07-16 16:05  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41230&ptid=13922
if(hash){

   var n=hash.match(/\d+/)[0];


我是替换掉之前的,直接复制过去的,我这边用下来没反应呢。


2015-07-16 16:11  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41231&ptid=13922
我是替换掉之前的,直接复制过去的,我这边用下来没反应呢。

看来你对js的了解并不多,如果你把js写在页面头部,那么我去获取元素怎么获取?这个时候元素还没加载完成。。像你发到论坛上的代码那样把之前写的那个if判断替换掉就可以了。如果要写在页面头部需要写window.onload
2015-07-16 16:20  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41232&ptid=13922
看来你对js的了解并不多,如果你把js写在页面头部,那么我去获取元素怎么获取?这个时候元素还没加载完成 ...

确实我对js真的没有学习过,只是从基础的css在学。

我一开始是放在底部的,所以第一次你给的js能够使用,也发现了小问题。

然后你给了新的js代码,我就在底部替换掉原先的,没起作用。然后,就尝试着放到顶部,也没起作用。截图的时候就放在顶部。


2015-07-16 16:26  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41232&ptid=13922
看来你对js的了解并不多,如果你把js写在页面头部,那么我去获取元素怎么获取?这个时候元素还没加载完成 ...

另外,在附上page1的链接,不知道写的对否。

2015-07-16 16:31  回复本帖
849800875
 本帖最后由 849800875 于 2015-7-16 16:32 编辑 

forum.php?mod=redirect&goto=findpost&pid=41233&ptid=13922
确实我对js真的没有学习过,只是从基础的css在学。

我一开始是放在底部的,所以第一次你给的js能够使用 ...
也许是我没有表述清楚,我的意思是替换掉if而不是之前的全部,前边那些代码都被删掉了肯定不行了。
var oTab1=document.getElementById('Tab1');
var aLi=oTab1.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++){
    aLi.className='';
}
var hash=window.location.hash.substring(1);
if(hash){

   var n=hash.match(/\d+/)[0];
   var intro=document.getElementById('intro');
   var aDiv=intro.children;

   var active=document.getElementById(hash);

   for(var i=0;i<aDiv.length;i++){
    aDiv.style.display='none';
   }
   aDiv[n-1].style.display='block';
   active.className='hover'; 
}

这个是整个一段,复制上去试试。
放在页面底部,或者加一个window.onload=function(){
把js代码写在这里。
}
2015-07-16 16:31  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41235&ptid=13922
也许是我没有表述清楚,我的意思是替换掉if而不是之前的全部,前边那些代码都被删掉了肯定不行了。
var oT ...

麻烦你能否把改好的打包发下,我很凌乱了{:soso_e101:}
2015-07-16 16:40  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41236&ptid=13922
麻烦你能否把改好的打包发下,我很凌乱了

把我刚才发的放到页面底部,或者你把帖子从新看一遍。
2015-07-16 16:43  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41238&ptid=13922
把我刚才发的放到页面底部,或者你把帖子从新看一遍。

真的很抱歉,我反反复复试了一个多小时,始终没有成功。麻烦看下我的修改,蓝色部分是我按照老师您的内容增加的。
page 1
    <body>
        <div id="container">
            
                    <div id="big_title">
                        <h1 class="f_left"> 新闻</h1>
                    </div>
                    <div id="four_service">
                        <div class="every_service">
                            <h2>✛ 时事要闻</h2>
                            <a href="product.html">
                            <img src="images/p1.jpg" alt="Embroidery Machine"/></a> 
                            <ul class="service_intro">
                                <li><a href="page2.html#one1">• 要闻1</a></li>
                                <li><a href="page2.html#one2">• 要闻2</a></li>
                                <li><a href="page2.html#one3">• 要闻3</a></li>
                                <li><a href="page2.html#one4">• 要闻4</a></li>
                                <li><a href="page2.html#one5">• 要闻5</a></li>
                            </ul>
                        </div>
                        
                        <div class="every_service">
                            <h2>✛ 体育新闻</h2>
                            <a href="product.html">
                            <img src="images/p3.jpg" alt="Spare parts"/></a>
                            <ul class="service_intro">
                                <li><a href="page2.html#one6">• 篮球</a></li>
                                <li><a href="page2.html#one7">• 足球</a></li>
                                <li><a href="page2.html#one8">• 乒乓</a></li>
                            </ul>
                        </div>
                        
    </body>



Page 2
<body>
        <div id="container">


            <div id="main">
                 <div id="left_bar">
                     <div class="sub_title">
                        <h2> 新闻栏目</h2>
                     </div>

          <div id="Tab1">
<div class="Menubox">
<span>时事要闻</span>
<ul>
<li id="one1"><a>•  要闻1</a></li>
<li id="one2"><a>•  要闻2</a></li>
<li id="one3"><a>•  要闻3</a></li>
<li id="one4"><a>•  要闻4</a></li>
<li id="one5"><a>•  要闻5</a></li><br /><br />
<span>体育新闻</span>
<li id="one6"><a>•  篮球</a></li>
<li id="one7"><a>•  足球</a></li>
<li id="one8"><a>•  乒乓</a></li>
</ul>
</div>
</div>
</div>

                <div id="right_bar">
                    <div id="intro">
            <div id="con_one_1">
                <div id="big_title">
                        <div class="f_left position"> • • 要闻1 </div>
                    </div><div id="Tab2">
这里是要闻1的内容</div></div>
<div id="con_one_2" style="display:none"><div id="big_title">
                        <div class="f_left position"> • • 要闻2 </div>
                    </div><div id="Tab2">
这里是要闻2的内容</div></div>
<div id="con_one_3" style="display:none"><div id="big_title">
                        <div class="f_left position"> • • 要闻3 </div>
                    </div><div id="Tab2">
这里是要闻3的内容</div></div>
<div id="con_one_4" style="display:none"><div id="big_title">
                        <div class="f_left position"> • • 要闻4 </div>
                    </div><div id="Tab2">
这里是要闻4的内容</div></div>
<div id="con_one_5" style="display:none">
                        <div id="big_title">
                        <div class="f_left position"> • • 要闻5 </div>
                    </div><div id="Tab2">
这里是要闻5的内容</div></div>
<div id="con_one_6" style="display:none"><div id="big_title">
                        <div class="f_left position"> • • 篮球 </div>
                    </div><div id="Tab2">
这里是篮球的内容</div></div>
   <div id="con_one_7" style="display:none"><div id="big_title">
                        <div class="f_left position"> • • 足球 </div>
                    </div><div id="Tab2">
这里是足球的内容</div></div>
  <div id="con_one_8" style="display:none"><div id="big_title">
                        <div class="f_left position"> • • 乒乓 </div>
                    </div><div id="Tab2">
这里是乒乓的内容</div></div>
</div>
</div>
        </div>


 <script>
function setTab(name,cursel,x){
for(i=1;i<=x;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>

<script>
window.onload=function(){
    var oTab1=document.getElementById('Tab1');
var aLi=oTab1.getElementsByTagName('li');


for(var i=0;i<aLi.length;i++){
    aLi.className='';
}
var hash=window.location.hash.substring(1);
if(hash){


   var n=hash.match(/\d+/)[0];
   var intro=document.getElementById('intro');
   var aDiv=intro.children;


   var active=document.getElementById(hash);


   for(var i=0;i<aDiv.length;i++){
    aDiv.style.display='none';
   }
   aDiv[n-1].style.display='block';
   active.className='hover'; 
}
}
</script>
    </body>



同时也附上我修改的打包文件。

谢谢老师!
2015-07-16 18:37  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41246&ptid=13922
真的很抱歉,我反反复复试了一个多小时,始终没有成功。麻烦看下我的修改,蓝色部分是我按照老师您的内容 ...

找到这一行
 aDiv.style.display='none';
aDiv后边少了个[i],
应该写成
 aDiv[i].style.display='none';
是我的疏忽。

2015-07-16 19:29  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41248&ptid=13922
找到这一行
 aDiv.style.display='none';
aDiv后边少了个,


这两个,实在看不出区别啊。。。
2015-07-16 19:53  回复本帖
849800875
 aDiv[i].style.display='none';
这个样子,肯能是被屏蔽掉了。多了一个中括号取下标。
2015-07-16 20:12  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41250&ptid=13922
aDiv.style.display='none';
这个样子,肯能是被屏蔽掉了。多了一个中括号取下标。 ...

老师,好用了,很感谢你。

非常不好意思麻烦你一整天。

我四十多岁了,经营着自己的外贸公司,从去年开始抽空学习制作自己的网站。

这段代码是我截取的一小段,并稍微改了内容。

从来没有遇到过像你这么有耐心,并且悉心指导像我这样非常入门的新手,难能可贵。

祝福你有非常美好的未来,坚信好人有好报。

再次表示衷心的感谢和由衷的祝福。
2015-07-16 20:21  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41251&ptid=13922
老师,好用了,很感谢你。

非常不好意思麻烦你一整天。


客气了,有空可以看看视频,你现在用的这种方式,以后如果修改什么东西的话会非常麻烦,说不定还要从新来。

2015-07-16 20:35  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41252&ptid=13922
客气了,有空可以看看视频,你现在用的这种方式,以后如果修改什么东西的话会非常麻烦,说不定还要从新来 ...

老师,不好意思又要麻烦你,希望是最后一次麻烦你,实在抱歉。

page1转到page2时超链接现在都没问题,但是页面会滚到底部,我希望是跳转到page2时,能够开始在顶部。希望我表述的能够让你明白,我实在太业余了。

具体的问题,你可以看“代码”,我加了一些内容。

谢谢!


2015-07-29 20:54  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41567&ptid=13922
老师,不好意思又要麻烦你,希望是最后一次麻烦你,实在抱歉。

page1转到page2时超链接现在都没问题,但 ...

问题是因为锚点引起的用js解决的话可以这样写

window.onscroll=function(){


        document.body.scrollTop=document.documentElement.scrollTop=0;

    }

    document.body.scrollTop=document.documentElement.scrollTop=0;



没有什么专业不专业的,分工不同罢了。
2015-07-30 11:19  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41583&ptid=13922
问题是因为锚点引起的用js解决的话可以这样写

window.onscroll=function(){


太棒了,谢谢!
2015-07-31 18:07  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41648&ptid=13922
太棒了,谢谢!

不客气,凑字数。。。。。
2015-07-31 18:09  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41583&ptid=13922
问题是因为锚点引起的用js解决的话可以这样写

window.onscroll=function(){


不好意思,刚刚试了下,发现滑动条定死了,不能够动,页面定住了的。
2015-07-31 18:16  回复本帖
849800875
forum.php?mod=redirect&goto=findpost&pid=41652&ptid=13922
不好意思,刚刚试了下,发现滑动条定死了,不能够动,页面定住了的。

好吧,我代码貌似没有复制完,你在onscroll后边那个函数里边,最后一行写上,window.onscroll=null.
2015-07-31 18:36  回复本帖
comingforhelp
forum.php?mod=redirect&goto=findpost&pid=41656&ptid=13922
好吧,我代码貌似没有复制完,你在onscroll后边那个函数里边,最后一行写上,window.onscroll=null.
 ...

<script>
  window.onscroll=function(){


        document.body.scrollTop=document.documentElement.scrollTop=0.;
        window.onscroll=null.

    }

    document.body.scrollTop=document.documentElement.scrollTop=0;
</script>

是这样子写吗?

2015-07-31 19:06  回复本帖
登录 后才可以发表回复