如何更改我的菜單以顯示活動菜單

有人可以告訴我以什麼方式更改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'); 
});

來源

2014-11-05 vaibhav

爲活動標籤和非活動標籤製作css類。 – Amy 2014-11-05 07:28:22

你有沒有得到解決方案？ – Amy 2014-11-05 07:50:59

@Amy ...答案是絕對正確的謝謝:) 你能幫我實現它具體如http://www.cssdrive.com/elements/slideshowpro.gif – vaibhav 2014-11-05 08:51:15

試試這個：

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; 
 
    
 
});

* { 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; 
 
}

<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>

來源

2014-11-05 07:36:26 Amy

如何更改我的菜單以顯示活動菜單

回答

相關問題