Табове с картинки за бекграунд и смяна при hover

[vassy]

Понеже не съм много на ти с js, а трябва да направя едни табове с различни картинки, който трябва и да се сменят при а:hover, да питам. Някой да предложи готово решение. Доста се поравих из нета, но всичко е така направено, че ползва еднакви бекграунди за нормален и a:hover за всички табове. Целта е да се сменя картинката при selected, но с индивидуална на всеки таб. Става дума за това:



на картинката SMS е selected.

 

[yuliyan]

За: Табове с картинки за бекграунд и смяна при hover

За: Табове с картинки за бекграунд и смяна при hover

С jQuery UI можеш да си стайлнеш табовете, мисля, че ще се получи лесно желаният ефект

 

[vassy]

За: Табове с картинки за бекграунд и смяна при hover

За: Табове с картинки за бекграунд и смяна при hover

Знам, но не съм много на ти и с jquery. Ако дадеш едно рамо с линк, с кода ще се оправя.

 

[yuliyan]

За: Табове с картинки за бекграунд и смяна при hover

За: Табове с картинки за бекграунд и смяна при hover

jQuery UI - Tabs Demos & Documentation



А моята идея е с класове да им сложиш картинките, според метода за плащане. Не съм правил такова нещо с библиотеката, но би трябвало да се получи. Друг е въпросът дали е най-добрият ти вариант да зареждаш цяла библиотека за един widget. Може да се потърси някакъв по-тънкажен вариант, а този да ти остане за резерва.

 

[mgrozdanov]

Re: Табове с картинки за бекграунд и смяна при hover

JAVASCRIPT
$(document).ready(function() {
//TABS
$('.tab_content').hide();
$(".tab_content").first().css("display", "block");
$(".tab_menu li").eq(0).addClass("active");

$(".tab_menu li").click(function(e){
var listIndex = $(".tab_menu li").index(this);

$(".tab_menu li").removeClass("active");
$(".tab_menu li").eq(listIndex).addClass("active");

$('.tab_content').hide();
$('.tab_content').eq(listIndex).fadeIn();
});
});


HTML
<div class="tab_menu">
<ul class="tab_menu">
<li>Бутон таб 1</li>
<li>Бутон таб 2</li>
<li>Бутон таб 3</li>
</ul>
</div>

<div id="tab_container"><!--COMMENTS-->
<div class="tab_content">таб 1</div>
<div class="tab_content">таб 2</div>
<div class="tab_content">таб 3</div>
<div class="tab_content">таб 4</div>
</div>


CSS
/*********TABS**************/
/******* MENU *******/
#tab_container{
margin: 7em auto 0 auto;
width: 400px;
}

.tab_menu ul{
list-style: none;
}

.tab_menu ul.tab_menu li{
float: left;
margin-right: 5px;
margin-bottom: -1px;
}

.tab_menu ul.tab_menu li{
display: block;
padding: 5px 10px 5px 10px;
background: #efefef;
margin-bottom: -1px;
border: 1px solid #d0ccc9;
position: relative;
color: #898989;
cursor: pointer;
}

.tab_menu ul.tab_menu li.active{
background: #fff;
top: 1px;
border-bottom: 0;
color: #f60;
}
/******* /MENU *******/


/******* CONTENT *******/
.tab_content{
margin: 0pt auto;
background: #efefef;
background: #fff;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}

 

[vassy]

За: Табове с картинки за бекграунд и смяна при hover

За: Табове с картинки за бекграунд и смяна при hover

Нещо подобно пуснах преди 3 дни. Твоето с малки корекции си работи, но не ми решава проблема с картинките. Тази сутрин постигнах нещо задоволително, макар полетата на табовете да съм ги запълнил по най-баламския начин с интервали за да ми се вижда бекграунда. Но имам проблем. Като вкарам кода в истинското приложение, при първоначално зареждане ми изкарва всички дивове активни, т.е. съдържанието им едно под друго, а в тестовото си работи коректно. При първа смяна с клик, всичко си идва на място. Все едно не сработва скрипта при първо зареждане на страницата. Възможно ли е да се бият с друг js. Изчистих де що се зарежда jquery и оставих локално да се зарежда само

<script type="text/javascript" src="test-tab/jquery-1.7.2.min.js"></script>

и пак същото. Сайта е писана система, не от мен, оправям и добавям някои функции. Смешното е, че всички видове разплащания с тестовете и оправяне на комуникациити между сайта и сървърите ми отнеха 2 дни, а с тия табове с картинки си играя трети ден.
А това е js за табовете:

$(document).ready(function(){

    $("#tabs li").click(function() {

        $("#tabs li").removeClass('active');

        $(this).addClass("active");
 
        $(".tab_content").hide();
 
        var selected_tab = $(this).find("a").attr("href");
 
        $(selected_tab).fadeIn();
 
        return false;
    });
});

Проблема ми е, че въобще не съм на ти с js, но ще трябва да го попрегледам май. Програмирането не ми е чуждо, а и покрай този проблем видях чудесни решения с js.

 

[mgrozdanov]

Re: Табове с картинки за бекграунд и смяна при hover

Не трябва да се добавя class active, а различни active класове. Демек ако сме кликнали на първия таб да се добави клас active1, на втория active2. И вече на тези класове си им даваш CSS. Самите бутони по същия начин трябва да се направят с различни класове. Ако не си се справил до довечера ще ти помогна, но сега заминавам и няма как.