如何在单击链接时更改范围

时间：2015-09-18 00:01:11

标签： javascript jquery html css

好的，所以我有4个Spans，而我想要的是当我点击链接中的链接时，链接所在的跨度颜色会发生变化。我也想要它，所以当单击跨度中的另一个链接时，跨度会改变颜色，之前单击的跨度会恢复为原始颜色。对不起，如果没有解释清楚。 以下是我从另一个用户问的问题得到的js。我尝试使用它并改变它为我工作，但经过许多失败的尝试，没有运气。感谢您的耐心，我是JavaScript的新手，非常感谢任何建议或帮助。提前致谢！ 

<script>
$(document).ready(function() {
        $("#sec1").click(function() {
            $("#sec1").removeClass('active');
            $(this).addClass('active');
        });
    });
</script>
CSS:
#sec1 { height: 8vh; width:10%; text-align:center; position: fixed; top:9vh; left:0;  background: rgb(238,238,238); /* Old browsers */
	background: #7d7e7d; /* Old browsers */
	background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
	background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */;
   display:inline; white-space:nowrap; overflow:hidden;
     
     }
#sec1.active {
    background:grey;
}

#sec2 { height: 8vh; width:10%; text-align:center;    position: fixed; top:9vh; left:10.25%; background: rgb(238,238,238); /* Old browsers */
	background: #7d7e7d; /* Old browsers */
	background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
	background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */;
       display:inline; white-space:nowrap; overflow:hidden;
     }
#sec2.active{background:grey;}
#sec3 { height: 8vh; width:10%; text-align:center;    position: fixed; top:9vh; left:20.5%; background: rgb(238,238,238); /* Old browsers */
	background: #7d7e7d; /* Old browsers */
	background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
	background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */;
       display:inline; white-space:nowrap; overflow:hidden;
     }
#sec3.active{background:grey;}
#sec4 { height: 8vh; width:10%; text-align:center;    position: fixed; top:9vh; left:30.75%; background: rgb(238,238,238); /* Old browsers */
	background: #7d7e7d; /* Old browsers */
	background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
	background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */;
      display:inline; white-space:nowrap; overflow:hidden;
     }
#sec4.active{background:grey;}
html:
<span id="sec1" class="box"><a href="" class="one"><p style="margin-top:2.5vh; font-size:1.25em;"><b>MOVIES</a></p></div>
<span id="sec2" class="box"><a href="" class="two"><p style="margin-top:2.5vh; font-size:1.25em"><b>MUSIC</b></p></a></div>
<span id="sec3" class="box" ><a href="" class="three"><p style="margin-top:2.5vh; font-size:1.25em"><b>RADIO</b></p></a></div>
<span id="sec4" class="box"><a href="" class="four"><p style="margin-top:2.5vh; font-size:1.25em"><b>COMICS</b></p></a></div>

3 个答案:

答案 0 :(得分：2)

我会使用框类选择器而不是ID，并清理HTML。

＆＃13;
＆＃13; 
$(document).ready(function() {
  var $boxes = $(".box").click(function() {
    $boxes.removeClass('active');
    $(this).addClass('active');
  });
});
＆＃13; 
a {color: #ffffff; text-decoration:none; font-family:arial;}
.box {
  color: #ffffff;
  background: rgb(238, 238, 238);
  /* Old browsers */
  background: #7d7e7d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* IE10+ */
  background: linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0);
  /* IE6-9 */
  ;
  display: inline-block;
  padding:10px 20px;
  white-space: nowrap;
}
.active  {
  background: #aaa;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="sec1" class="box">
  <a href="#" class="one"style="margin-top:2.5vh; font-size:1.25em;">
    MOVIES
  </a>
 </span>

<span id="sec2" class="box">
  <a href="#" class="two" style="margin-top:2.5vh; font-size:1.25em">
    MUSIC
  </a>
</span>

<span id="sec3" class="box" >
  <a href="#" class="three" style="margin-top:2.5vh; font-size:1.25em">
    RADIO
  </a>
</span>

<span id="sec4" class="box">
  <a href="#" class="four" style="margin-top:2.5vh; font-size:1.25em">
    COMICS
  </a>
</span>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您发布的标记存在一些问题。

此处会打开一个范围代码<span>，但它会被错误地关闭为div </div>。它应该作为跨度关闭。 </span>：

<span id="sec1" class="box"><a href="" class="one"><p style="margin-top:2.5vh; font-size:1.25em;"><b>MOVIES</a></p></div>

此外，您的href需要指向一个哈希值，因此页面不会重定向。

（将href=""的所有实例更改为href="#"）

这是一种快速而肮脏的方式来做你想做的事。它有重复的代码，这不是最佳实践（不是DRY），但它可以解决问题。我简化了js，css和html来展示这个概念。

的javascript 

$(document).ready(function() {

  // click box 1
  $("#sec1").click(function() {
    $(this).addClass('active');
    $("#sec2").removeClass('active');
    $("#sec3").removeClass('active');
    $("#sec4").removeClass('active');
  });

  // click box 2
  $("#sec2").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec3").removeClass('active');
    $("#sec4").removeClass('active');
  });  

  // click box 3
  $("#sec3").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec2").removeClass('active');
    $("#sec4").removeClass('active');
  });  

  // click box 4
  $("#sec4").click(function() {
    $(this).addClass('active');
    $("#sec1").removeClass('active');
    $("#sec2").removeClass('active');
    $("#sec3").removeClass('active');
  });  

});

CSS 

.box {
  text-align:center;
  top:9vh;
  left:0;
  background-color: #7d7e7d;
  display:inline;
  white-space:nowrap;
  overflow:hidden;
  margin: 3px;
  padding: 3px;
}

.active {
  background-color: green;
}

HTML 

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<span id="sec1" class="box">
  <a href="#">
    MOVIES
  </a>
</span>

<span id="sec2" class="box">
  <a href="#">
    MUSIC
  </a>
</span>

<span id="sec3" class="box" >
  <a href="#">
    RADIO
  </a>
</span>

<span id="sec4" class="box">
  <a href="#">
    COMICS
  </a>
</div>

</body>
</html>

http://jsbin.com/riranefuri/edit?html,css,js,output

答案 2 :(得分：0)

只需删除每个范围内的类，然后将其添加到单击一个。

<script>
$(document).ready(function() {
        $("span.box").click(function() {
            $("span.box").removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

但是，如果您希望使用a-tags来浏览不同的页面，则应通过服务器编程将active类添加到适当的链接，而不是js。< / p>

相关问题
最新问题