Блог

Здравствуйте, у меня есть фрагмент кода, и я не знаю, как изменить идентификаторы и классы div.

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» и идентификатор «dropdown_submenu» на «dropdown_submenu_long». когда я нажимаю на «Instrumente de scris» и меняю его обратно на значение по умолчанию, когда я нажимаю на любую из других вкладок.

Заранее благодарю вас.

Предполагая, что «Instrumente de scris» имеет идентификатор, подобный следующему

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