phpstudy集成环境

 首页 > javascript的点击跳转之后，怎么添加样式

javascript的点击跳转之后，怎么添加样式

大家好，目前正在学习JavaScript课程，学着写了一个导航栏，就是点击该导航名的时候就自动添加class , 但是我写好后，如果点击不跳走（本页面里）的话，是好的，如果点击导航，跳转到其他（其他页面也正确加载了JS）页面的话，这个效果就完全无效了，特来请教一下，如果是跳转到其他页面的应该怎么写呢？请帮忙分析下，谢谢！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
.active {background: red;}
</style>
<script>
window.onload = function ()
{
  var oNav = document.getElementById('nav1');
  var oA  = oNav.getElementsByTagName('a');

  for (var i=0;i<oA.length;i++) 
  {
    oA[i].onclick = function()
    {
      for (var i=0;i<oA.length;i++)
      {
        oA[i].className="";
      }  
      this.className="active";
    };
  };
};  
</script>
</head>
<body>
    <div>
            <nav id="nav1">
              <a class="active" href="javascript:">首页</a>
          <a href="javascript:">测试一</a>
          <a href="javascript:">测试二</a>
          <a href="javascript:">测试三</a>
          <a href="javascript:">测试四</a>
          <a href="javascript:">测试五</a>
          <a href="javascript:">测试六</a>
          <a href="javascript:">测试七</a>
            </nav>
    </div>        
</body>
</html>

下面的代码是跳转到其他页面的，当然其他页面也加载了这个CSS和JS，现在就是搞不懂，如果跳走到其他页面了，代码应该怎么写

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
.active {background: red;}
</style>
<script>
window.onload = function ()
{
  var oNav = document.getElementById('nav1');
  var oA  = oNav.getElementsByTagName('a');

  for (var i=0;i<oA.length;i++) 
  {
    oA[i].onclick = function()
    {
      for (var i=0;i<oA.length;i++)
      {
        oA[i].className="";
      }  
      this.className="active";
    };
  };
};  
</script>
</head>
<body>
    <div>
            <nav id="nav1">
              <a class="active" href="#">首页</a>
          <a href="http://www.xxx.com/ceshi1/index.html">测试一</a>
          <a href="http://www.xxx.com/ceshi2/index.html">测试二</a>
          <a href="http://www.xxx.com/ceshi3/index.html">测试三</a>
          <a href="http://www.xxx.com/ceshi4/index.html">测试四</a>
          <a href="http://www.xxx.com/ceshi5/index.html">测试五</a>
          <a href="http://www.xxx.com/ceshi6/index.html">测试六</a>
          <a href="http://www.xxx.com/ceshi7/index.html">测试七</a>
            </nav>
    </div>        
</body>
</html>

就是各种网站常见的那种导航，点击当前栏目，栏目高亮，请用原生JS帮忙分析解答下，谢谢！

记住一点，页面刷新，所有文件重新加载，那就从头来。

刷新页面跳转还要添加样式，目前我知道有两个方法。
一、跳转的时候在url中做标记，在js里面做一个判断，通过标记给对应元素添加样式。
二、写一个全局url匹配方法，访问某些url给指定元素添加样式。

一般来说，这种需要保存当前状态的结构，比如导航，tab，幻灯片切换等等，都会用一个类似index的变量来记录当前应该是谁要得到active了。页面刷新的时候我们需要有一个初始化页面的一个思路或者函数。比如init。如果你的页面要跳转到其他页面，你需要将index传递给其他页面，告诉另外一个页面第index个按钮需要高亮，新的页面通过init()函数将index的值在链接或者ajax中解析出来即可。

简单写了一个例子，演示了index通过链接传递，是往自己的页面跳转。如果你想跳转到其他页面，将url改一改就行了


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #list { width: 150px; margin: 20px auto; }
        #list a { display: block; width: 100%; height: 40px; background: #ccc; margin-top: 10px; color: #fff; text-align: center; line-height: 40px;
        cursor: pointer; }
        #list li:hover { background-color: #FFE17B; }
        #list .active { background-color: orange; }
    </style>
</head>
<body>
    <ul id="list">
        <a href="#">Javascript</a>
        <a href="#">Gulp</a>
        <a href="#">Angular</a>
        <a href="#">Bootstrap</a>
        <a href="#">Jquery</a>
    </ul>
</body>
<script>
    window.onload = function() {
        var index = 0;

        var oList = document.getElementById('list');
        var aA = oList.getElementsByTagName('a');
        var url = window.location.href;

        // 初始化页面
        init();
        

        // 先写一个功能函数，从链接地址中获取 index 的值
        function getIndex(url, key) {

            if (!url) { return; }
            
            var arr = url.slice(url.indexOf('?') + 1).split('&');

            return function() {
                for(var item in arr) {
                    var otherArr = arr[item].split('=');
                    if (otherArr[0] == key) {
                        return otherArr[1];
                    };
                }
            }();
        }

        // 再写一个初始化函数,这个例子中比较简单，只需知道哪一个按钮是当前状态
        function init() {
            index = getIndex(url, 'index') ? getIndex(url, 'index') : 0;

            var i = 0, len = aA.length;
            for(; i<len; i++) {
                aA[i].className = '';

                // 根据不同情况处理一下url,然后给href设置上值，你也可以直接在a标签中添加链接，记得要加上index参数
                if (url.indexOf('?') > -1) {
                    if (url.indexOf('index=') > -1) {
                        url = url.replace(/index=\d*/g, 'index='+i);
                    } else {
                        url += '&index='+i;
                    }
                } else {
                    url += '?index='+i;
                }

                aA[i].setAttribute('href', url);

            }

            aA[index].className = 'active';
        }

    }
</script>
</html>

给url后面加一个参数，比如a.php？1，取url后面的1，判断对应的是第一个导航添加一个选中的class

请参考这个: http://.com/q/1010000003905336?_ea=418544

那啥，挺原始的写法哈……
如果照你这样，每个页面都包含自己的菜单，那么完全没必要手动处理active，直接每个页面写死就行。当然，我估计你不想这样。

那么，通常正确的做法是。只有一个index页面，内容部分通过iframe或ajax加载。各页面切换时不刷新页面，而是修改iframe的src或者ajax后替换内容部分。
如果用iframe的话，那么你需要把a标签里面的href改为data-url(或者其他任何你喜欢的属性)

<a href="http://www.xxx.com/ceshi5/index.html">测试五</a>
<a href="javascript:void(0)" data-url="http://www.xxx.com/ceshi5/index.html">测试五</a>

然后在给click添加event参数，并加上frame跳转语句

function(e)
{
  for (var i=0;i<oA.length;i++)
  {
    oA[i].className="";
  }  
  this.className="active";
  var url = e.target.dataset.url;
  document.getElementById('frame的id').src = url;
};

实际网站中，通常用php做页面判断，判断为是 则相应的li解析出来有active样式，判断为否则li中的active样式不解析

【热门文章】
【热门文章】