Question

你好，我有一段代码，我不知道如何更改div的id和类。

HTML

<div id="menu-wrapper" class="menu-wrapper">

<ul class="nav">
    <a id="home_btn" href="http://www.pixuripersonalizate.net"><img src="/images/home_button.png"></img></a>
    <li class="nav-item nav-item-first">
        <a href="#">Instrumente de scris</a>
        <div>
            <ul class="sub-menu">
                <li><a href="#">Pixuri plastic</a></li>
                <li><a href="#">Pixuri plastic metal</a></li>
                <li><a href="#">Pixuri de lux</a></li>
                <li><a href="#">Pixuri metalice</a></li>
                <li><a href="#">Pixuri din aluminiu</a></li>
                <li><a href="#">Pixuri biodegradabile</a></li>
                <li><a href="#">Pixuri modele speciale</a></li>
                <li><a href="#">Pixuri din bambus</a></li>
                <li><a href="#">Stilouri</a></li>
                <li><a href="#">Pixuri cu gel personalizate</a></li>
                <li><a href="#">Pixuri campanie electorala</a></li>
                <li><a href="#">Pixuri si creioane craciun</a></li>
                <li><a href="#">Evidentiatoare</a></li>
            </ul>
        </div>
    </li>
    <li class="nav-item">
        <a href="#">Truse/Pixuri de lux</a>
        <div>
            <ul class="sub-menu">
                <li><a href="#">Pixuri PARKER</a></li>
                <li><a href="#">Pixuri AlexLuca</a></li>
                <li><a href="#">Pixuri Andre Philippe</a></li>
            </ul>
        </div>
    </li>
    <li class="nav-item">
        <a href="#">Truse seturi de scris</a>
        <div>
            <ul class="sub-menu">
                <li><a href="#">Seturi din lemn</a></li>
                <li><a href="#">Seturi de lux</a></li>
                <li><a href="#">Seturi din plastic</a></li>
            </ul>
        </div>
    </li>
    <li class="nav-item">
        <a href="#">Creioane</a>
        <div>
            <ul class="sub-menu">
                <li><a href="#">Creioane colorate</a></li>
                <li><a href="#">Creioane mecanice</a></li>
                <li><a href="#">Creioane de scris</a></li>
            </ul>
        </div>
    </li>
    <li class="nav-item">
        <a href="#">Accesorii pixuri</a>
        <div>
            <ul class="sub-menu">
                <li><a href="#">Cutii cadou</a></li>
                <li><a href="#">Suporturi pentru pixuri</a></li>
                <li><a href="#">Etuiuri si cutii</a></li>
                <li><a href="#">Ascutitori</a></li>
            </ul>
        </div>
    </li>
</ul>

</div>
<div id="dropdown_submenu" class="submenu_container">
<div class="submenu_blue"></div>
<ul class="submenu">
</ul>
</div>

的Javascript

$( document ).ready(function() {

$('.nav-item div').hide();
 $('.nav-item-first div').show();

var all_divs = $('.nav-item a').parent().find('div');

 $('.nav-item a').click(function(e){

 e.preventDefault();
 // hide all divs
 all_divs.hide();
$this = $(this).parent().find('div');
 // here is what I want to do
 if ($this.is(':hidden')) {
 $(this).parent().find('div').show();
}
});
$('.nav-item a').click(function(){
        $(this).parent().attr('class', 'nav-item').addClass('curent-   menu-item').removeClass('nav-item').siblings().removeClass('curent-menu-item').addClass('nav-item');

        if($(this).parent().attr('class', 'instr_scris'))
            {
                $('')
            }
});


});

演示：test.pixuripersonalizate.net

所以我想做的就是将类“submenu”更改为“submenu_long”，将“submenu_container”更改为“submenu_container_long”，将id“dropdown_submenu”更改为“dropdown_submenu_long”。当我点击“Instrumente de scris”并点击任何其他标签时将其更改回默认值。

提前谢谢。

Answer 1

假设＆＃34; Instrumente de scris＆＃34;有一个如下的ID

<a href="#" id='change'>Instrumente de scris</a>

您可以执行类似

的操作

$('li a').click(function(){
 if($(this).attr('id')=='change')
   change();
 else
   reset();
});

function change(){
 $('.submenu').removeClass('submenu').addClass('submenu_long');
 $('.submenu_container').removeClass('submenu_container').addClass('submenu_container_long');
 $('#dropdown_submenu').attr('id','dropdown_submenu_long');
}

function reset(){
$('.submenu_long').removeClass('submenu_long').addClass('submenu');
 $('.submenu_container_long').removeClass('submenu_container_long').addClass('submenu_container');
 $('#dropdown_submenu_long').attr('id','dropdown_submenu');
}

使用jquery更改divs类和id的基本语法（使用自定义代码）

1 个答案: