jQuery One Div, два URL, используя CSS, чтобы сделать поле выбора

Question

jQuery One Div, два URL, используя CSS, чтобы сделать поле выбора

0

Как говорится в заголовке, у меня есть один div, содержащий 2 urls (a). Я хочу сделать поле выбора с помощью jQuery, не касаясь html, используя только css и script. Кто-нибудь может мне помочь?

Я думал о таком коде (я знаю, что он не работает):

$(document).ready(function(){
            $('.language_selection a:last-child').hide();
            $('.language_selection').hover({
                $(this).show();
            });
        })

;

STP38 07 март 2014, в 16:15

Источник

0

Пожалуйста, будьте ясны о том, что вы хотите знать.
Nicky Smits 07 март 2014, в 14:48
0

Что именно вы пытаетесь достичь? Не могли бы вы добавить немного больше деталей в свой вопрос (меньше о том, можете ли вы это сделать, больше о том, что нужно сделать)?
royhowie 07 март 2014, в 14:49
0

На самом деле, нет. Если вы создадите окно выбора, ваш HTML изменится. Что ты хочешь, чтобы это случилось? Хотите знать, как сделать выделение с помощью JavaScript?
Nicky Smits 07 март 2014, в 14:56

Показать ещё 1 комментарий

Теги:

javascript

jquery

css

1 ответ

Ещё вопросы

Пожалуйста, будьте ясны о том, что вы хотите знать.
Что именно вы пытаетесь достичь? Не могли бы вы добавить немного больше деталей в свой вопрос (меньше о том, можете ли вы это сделать, больше о том, что нужно сделать)?
На самом деле, нет. Если вы создадите окно выбора, ваш HTML изменится. Что ты хочешь, чтобы это случилось? Хотите знать, как сделать выделение с помощью JavaScript?

MamaWalter · Accepted Answer · 2014-03-07T14-06-00.000Z

Не уверен, что вы просите, но может быть что-то вроде этого:

HTML:

 <div class="language_selection">
     <a href="#EN">EN</a>
     <a href="#FR">FR</a>
 </div>

CSS:

.language_selection a{
    display:none;
}

.language_selection .selected {
    display:block;
    color:red;
}

JS:

$(document).ready(function(){

    $('.language_selection a:first').addClass('selected');

    $('.language_selection a').click(function() {
        $('.language_selection a').removeClass('selected');
        $(this).addClass('selected');
    });

    $('.language_selection').hover(function(){
        $(this).find('a').css('display', 'block');
    }, function(){
        $(this).find('a').not('.selected').hide();
    });

});

FIDLE DEMO

Альтернатива (может быть, лучше), если вы можете изменить свой html с помощью javascript, это просто заменить ссылки на настоящий тег select:

var select = $('<select></select>');
$('.language_selection a').each(function () {

    var option = $('<option></option>');
    option.val($(this).attr('href')).text($(this).text())
    select.append(option);
});
$('.language_selection').html(select);

FIDDLE DEMO

спасибо, извините за мой плохой английский: p
@ STP38 отредактировано с альтернативой.