Question

我使用以下HTML在我的页面上有一些标签。目前标签具有相同的颜色。我希望每个标签在点击时都有不同的颜色。

我是技术作家，因此没有太多关于编码的信息。任何帮助都将受到高度赞赏。

<ul id="tabs">
<li><a href="#" name="tab1">'Architecture'</a></li>
<li><a href="#" name="tab2">'Business System Functionality'</a></li>
<li><a href="#" name="tab3">'Environment Administration'</a></li>
<li><a href="#" name="tab4">'Product'</a></li>    
<li><a href="#" name="tab4">'Testing'</a></li>
<li><a href="#" name="tab4">'Training'</a></li>
<li><a href="#" name="tab4">'Site Management'</a></li>
<li><a href="#" name="tab4">'Release Notes'</a></li>
</ul>

我也有以下css

  #tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  }

  #tabs li {
  float: left;
  margin: 0 .5em 0 0;
  }

  #tabs a {
  position: relative;
  background: #3399cc;
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
  }

 #tabs a:hover,
 #tabs a:hover::after,
 #tabs a:focus,
 #tabs a:focus::after {
 background: #fff;
 }

 #tabs a:focus {
 outline: 0;
 }

 #tabs a::after {
 content:'';
 position:absolute;
 z-index: 1;
 top: 0;
 right: -.5em;  
 bottom: 0;
 width: 1em;
 background: #ddd;
 background-image: linear-gradient(to bottom, #fff, #ddd);  
 box-shadow: 2px 2px 2px rgba(0,0,0,.4);
 transform: skew(10deg);
 border-radius: 0 5px 0 0;  
 }

 #tabs #current a,
 #tabs #current a::after {
  background: #fff;
 z-index: 3;
}

以下JQuery

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
  $(document).ready(function() {
  $("#content").find("[id^='tab']").hide(); // Hide all content
  $("#tabs li:first").attr("id", "current"); // Activate the first tab
  $("#content #tab1").fadeIn(); // Show first tab's content

  $('#tabs a').click(function(e) {
    e.preventDefault();
    if ($(this).closest("li").attr("id") == "current") { //detection for 
      current tab
      return;
    } else {
      $("#content").find("[id^='tab']").hide(); // Hide all content
      $("#tabs li").attr("id", ""); //Reset id's
      $(this).parent().attr("id", "current"); // Activate this
      $('#' + $(this).attr('name')).fadeIn(); // Show content for the   
      current tab
    }
  });
});
</script>

JSFiddle - https://jsfiddle.net/3vbfq3bf/

Answer 1

这是你想做的吗？

https://jsfiddle.net/u3nwLodj/

  $('#tabs a').on('click', function(e) {

   var color = $(this).attr("data-color");

   $(this).css("background-color", color);

  });

data-color属性也可以是hex或rgb（）

    <ul id="tabs">
       <li><a href="#" name="tab1" data-color="white">'Architecture'</a></li>
       <li><a href="#" name="tab2" data-color="blue">'Business System Functionality'</a></li>
       <li><a href="#" name="tab3" data-color="green">'Environment Administration'</a></li>
       <li><a href="#" name="tab4">'Product'</a></li>   
    </ul>

Answer 2

请看下面的方法：

https://jsfiddle.net/3vbfq3bf/8/

#include <fstream>
#include <iostream>

int main()
 {
   char ch;

   std::ifstream fl("file.log", std::ios::binary);

   while ( fl.read(&ch, sizeof(ch)) )
      std::cout << "-- [" << int(ch) << "]" << std::endl;

   return 0;
 }

Answer 3

前三个li

添加了

已修改

你想要这个吗？只添加了两个li，因此您可以手动为每个li提供类并为其编写相应的css。

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li:first").attr("id","current"); // Activate the first tab
$("#content #tab1").fadeIn(); // Show first tab's content

$('#tabs a').click(function(e) {
    e.preventDefault();
    if ($(this).closest("li").attr("id") == "current"){ //detection for 
    current tab
     return;       
    }
    else{             
      $("#content").find("[id^='tab']").hide(); // Hide all content
      $("#tabs li").attr("id",""); //Reset id's
      $(this).parent().attr("id","current"); // Activate this
      $('#' + $(this).attr('name')).fadeIn(); // Show content for the   
      current tab
      }
      });
      });
      </script>

 #tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 .5em 0 0;
}

#tabs a {
  position: relative;
  background: #3399cc;
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after {
  background: #fff;
}
#tabs a.one:hover,
#tabs a.one:hover::after,
#tabs a.one:focus,
#tabs a.one:focus::after {
  background: red;
}
#tabs a.second:hover,
#tabs a.second:hover::after,
#tabs a.second:focus,
#tabs a.second:focus::after {
  background: blue;
}
#tabs a.third:hover,
#tabs a.third:hover::after,
#tabs a.third:focus,
#tabs a.third:focus::after {
  background: green;
}


#tabs a:focus {
  outline: 0;
}

#tabs a::after {
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;  
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
}

#tabs #current a,
#tabs #current a::after {
  background: #fff;
  z-index: 3;
}

#content {
  background: #fff;
  padding: 2em;
  height: 220px;
  position: relative;
  z-index: 2;
  border-radius: 0 5px 5px 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

<ul id="tabs">
    <li><a class="one" href="#" name="tab1">'Architecture'</a></li>
    <li><a class="second" href="#" name="tab2">'Business System Functionality'</a></li>
    <li><a class="third" href="#" name="tab3">'Environment Administration'</a></li>
    <li><a href="#" name="tab4">'Product'</a></li>    
    <li><a href="#" name="tab4">'Testing'</a></li>
    <li><a href="#" name="tab4">'Training'</a></li>
    <li><a href="#" name="tab4">'Site Management'</a></li>
    <li><a href="#" name="tab4">'Release Notes'</a></li>
</ul>

每个标签的颜色不同

3 个答案: