Question

有人能告诉我，我可以通过什么方式更改jQuery代码以获得有效的标签概念。即：显示哪个菜单一次处于活动状态的那个。

我已经包含了我使用过的所有HTML，CSS和JS文件。

HTML：

<ul class="au-img">enter code here
    <li><a id="andrew" ><img id="aila" src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/grid-layout-project-128.png" alt="this"></a></li>
  <li><a id="john" ><img id="aila1" src="https://cdn0.iconfinder.com/data/icons/thin-time-date/57/thin-026_time_clock_watch-256.png" alt="thisone"></a></li>
  <li><a id="nate" ><img id="aila2" src="https://cdn0.iconfinder.com/data/icons/cosmo-mobile/40/book-512.png" alt="thisone2"></a></li>
</ul>



<div class="about-andrew hide">
  <h3>GRID</h3>
  <p>THIS IS GRID CLICKED</p>
</div>
<div class="about-john hide">
  <h3>CLOCK</h3>
  <p>THIS IS CLOCK CLICKED</p>
</div>
<div class="about-nate hide">
  <h3>BOOK</h3>
  <p>THIS IS BOOK CLICKED</p>
</div>

CSS：

* { margin:0;padding:0; }
body { background:#E9EEF5; }

ul {

 background-color:orange;

}

li {

  display:inline-block;
    float:left;
    width:33.33%;
    background:#E6E6E6;
    min-height:35px;
    text-align:center;
    vertical-align:middle;

}

img {
  cursor: pointer;
}

.default-text {
  font:20pt 'Georgia';

  margin:20px auto 0;
  text-align:center;
}

div {
    clear:both;
  position:relative;
  margin:0px auto 0;
  text-align:center;
  width: 100%;

}

h3 {
  font-size: 2em;
  margin-bottom: 20px;
}

.hide {
  display: none;
}
#aila {

    width:20px;
    height:20px;
    padding-top:7px;
}
#aila1 {

    width:20px;
    height:20px;
    padding-top:7px;
}
#aila2 {

    width:20px;
    height:20px;
    padding-top:7px;
}

Jquery：

$('.au-img a').on("click", function(e) {
  var $this = $(this),
      $id = $this.attr('id'),
      $class = '.' + $('.about-' + $id).attr('class').replace('hide', '');

  $('.default-text').addClass('hide');
  $('.about-' + $id).removeClass('hide');
  $('div[class*=about]').not($class).addClass('hide');
});

Answer 1

试试这个：

＆＃13;

var flag;
$('.au-img a').on("click", function(e) {
  var $this = $(this),
      $id = $this.attr('id'),
      $class = '.' + $('.about-' + $id).attr('class').replace('hide', '');

  $('.default-text').addClass('hide');
  $('.about-' + $id).removeClass('hide');
  $('div[class*=about]').not($class).addClass('hide');
   $(this).parent().css( "background-color", "red" );
  $(flag).parent().css( "background-color", "#E6E6E5" );
 
  flag=this;
  
});

＆＃13;

* { margin:0;padding:0; }
body { background:#E9EEF5; }

ul {

 background-color:orange;

}

li {

  display:inline-block;
    float:left;
    width:33.33%;
    background:#E6E6E5;
    min-height:35px;
    text-align:center;
    vertical-align:middle;

}

img {
  cursor: pointer;
}

.default-text {
  font:20pt 'Georgia';

  margin:20px auto 0;
  text-align:center;
}

div {
    clear:both;
  position:relative;
  margin:0px auto 0;
  text-align:center;
  width: 100%;

}

h3 {
  font-size: 2em;
  margin-bottom: 20px;
}

.hide {
  display: none;
}
#aila {

    width:20px;
    height:20px;
    padding-top:7px;
}
#aila1 {

    width:20px;
    height:20px;
    padding-top:7px;
}
#aila2 {

    width:20px;
    height:20px;
    padding-top:7px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="au-img">
    <li><a id="andrew" ><img id="aila" src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/grid-layout-project-128.png" alt="this"></a></li>
  <li><a id="john" ><img id="aila1" src="https://cdn0.iconfinder.com/data/icons/thin-time-date/57/thin-026_time_clock_watch-256.png" alt="thisone"></a></li>
  <li><a id="nate" ><img id="aila2" src="https://cdn0.iconfinder.com/data/icons/cosmo-mobile/40/book-512.png" alt="thisone2"></a></li>
</ul>



<div class="about-andrew hide">
  <h3>GRID</h3>
  <p>THIS IS GRID CLICKED</p>
</div>
<div class="about-john hide">
  <h3>CLOCK</h3>
  <p>THIS IS CLOCK CLICKED</p>
</div>
<div class="about-nate hide">
  <h3>BOOK</h3>
  <p>THIS IS BOOK CLICKED</p>
</div>

＆＃13;

如何更改菜单以显示活动菜单

1 个答案: