Question

<ul>
                <li id="tabHome" class="active"><a href="@Href("~")">Home</a></li>
                <li id="tabCMDS"  ><a href="@Href("~/CMDS")">CMDS</a></li>
                <li id="tabServiceMonitor" ><a href="@Href("~/Monitor")">Service Monitor</a></li>
                <li id="tabBatchInterface" ><a href="@Href("~/BatchInterface")">Batch Interface</a></li>
            </ul>

所以我想绑定到每个Id的click，并在点击的class="active"上设置{{1}}，并将其从所有其他ID中删除。

我可以做第一部分，但我怎么能做后者呢？

Answer 1

$(function() {
   $("li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

为<li>提供有意义的课程是明智的，这样你就可以恰当地选择那些，但你明白了。

Answer 2

无需将click事件绑定到每个ID，而是绑定到此无序列表的所有列表项。然后使用.parent（）。children（）方法。以下应该工作：

$('ul li').click(function(){
  $(this).addClass('active');
  $(this).parent().children('li').not(this).removeClass('active');
});

Answer 3

你可能会发现这更好（否则页面会跳转） -

$(function() {
$("li").click(function() {
  // remove classes from all
  $("li").removeClass("active");
  // add class to the one we clicked
  $(this).addClass("active");
  // stop the page from jumping to the top
  return false;
});
});

Answer 4

你可以这样做：

$('li').click(function(e){
    e.preventDefault();
   $(this).addClass('active');
    $(this).siblings().each(function(){
        $(this).removeClass('active') ;

    });
});

在这里摆弄http://jsfiddle.net/UVyKe/1/

Answer 5

给ul一个id或类，然后选择它。

<ul id = "nav">...

var $navItems = $('#nav > li');
$navItems.click(function(){
    $navItems.removeClass('active');
    $(this).addClass('active');
});

Answer 6

$("ul li").click(function()
{
$("ul .active").removeClass("active");
$(this).addClass("active");
});

Answer 7

您可以使用以下单行添加活动类，而无需使用任何事件

    <!DOCTYPE html>
<meta charset="utf-8">

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js">
</script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

<script>

var svg = d3.select("body").append("svg")
 .attr("width", 1500)
 .attr("height", 1500);

var strwi = d3.scaleLinear()
          .domain([100, 400])
          .range([7,35])

var group = svg.append("g")

var series = [
             [{"x": 360, "y": 250, "num": 100}, {"x": 520, "y": 400, "num": 
             100}, {"x": 630, "y": 300, "num": 100}],
             [{"x": 71, "y": 45, "num": 200}, {"x": 32, "y": 39, "num": 
             200}, {"x": 43, "y": 70, "num": 200}],
             [{"x": 100, "y": 300, "num": 300}, {"x": 200, "y": 200, "num": 
             300}, {"x": 300, "y": 200, "num": 300}], [{"x": 101, "y": 202, 
             "num": 400}, {"x": 102, "y": 204, "num": 400}, {"x": 103, "y": 
             215, "num": 400}]
  ];

  var line = d3.line()
  .curve(d3.curveBasis)
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; });

   svg.append("svg:defs").append("svg:marker")
    .attr("id", "triangle")
    .attr("refX", 0)
    .attr("refY", 5)
    .attr("markerWidth", 14)
    .attr("markerHeight", 14)
    .attr("viewBox", "0 0 20 10")
    .attr("orient", "auto")
    .append("path")
    .attr("d", "M 0,0 L 10,5 L 0,10 z")
    .style("fill", "black");

    group.selectAll(".line")
    .data(series)
    .enter().append("path")
    .attr("class", "line")
    .attr("stroke-width", function(d) {return strwi(d); })
    .attr("stroke", "black")
    .attr("fill", "none")
    .attr("d", line)
    .attr("marker-end", "url(#triangle)");

   </script>

link to refer

使用JQuery在导航栏中切换活动类

7 个答案: