حالت موضوعی | حالت خطی

takroz

سلام به همه

اگه به این سایت توجه کنید من منویی مثل این سایت میخوام که فقط با کلیک کردن روی موضوع مطالبش رو نشون بده
نام سایت:.: Mohakeme.com :. محاکمه .: - صفحه اصلی
نمونه در تصویر زیر :
[تصویر: 1204423156.gif]

با تشکر

A R A S H

اینا jQuery هست فک کنم !

Source-Nevis

1. اسکریپتش رو از اینجا بگیرین.

2. کد اچ تی ام الش:
[HTML]<div class="tabber">

<div class="tabbertab">
<h2> عنوان یک </h2>

<ul>
<li><a href="#">لیست شماره ی یک</a></li>
<li><a href="#">لیست شماره ی دو</a></li>
</ul>

</div>

<div class="tabbertab">
<h2> عنوان دو </h2>

<ul>
<li><a href="#">لیست شماره ی یک</a></li>
<li><a href="#">لیست شماره ی دو</a></li>
</ul>

</div>

</div>

<div id="domtab"></div>[/HTML]

3. استایلش هم اینه که باید توی سی اس اس تعریف کنین:

کد:

#domtab {height:12px;}

.tabberlive .tabbertabhide { display:none; }

.tabber {}

.tabberlive {}

ul.tabbernav {line-height:28px; height:28px; }

ul.tabbernav li { display: inline; line-height:28px; height:28px; }

ul.tabbernav li a { padding:6px;margin-right:5px; background: #F0F0F0; border:none; color: #666666;}

ul.tabbernav li a:link {color:#666666;}

ul.tabbernav li a:visited {color:#666666; }

ul.tabbernav li a:hover { color: #000; background: #fff; }

ul.tabbernav li.tabberactive a { background: #fff; }

ul.tabbernav li.tabberactive a:hover { color: #333; background: #F0F0F0; }

.tabberlive .tabbertab { padding:20px 10px 10px 10px; border-top:0; background:#fff; }

.tabberlive .tabbertab h2 { display:none; }

.tabberlive .tabbertab h3 { display:none; }

.tabbertab p { padding-bottom:10px;}

.tabbertab ul { }

.tabbertab ul li { padding:5px 0 6px 0; }

.tabbertab ul li { list-style:none; background:url(images/file.gif) no-repeat 0 5px; padding-left:20px; color: #666;} 

.tabbertab ul li a { border:none;}

.tabbertab ul li a:hover {text-decoration:none;}

واضح بود دیگه؟

takroz

مرسی سورس نویس عزیز

من کدارو ریختم یه فایل بعد اونا رو فراخوانی کردم
ولی ...

اینم کد ها ببین کجا اشکال دارم

کد:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link href="st.css" type=text/css rel=stylesheet>

<link href="tabber.js" type=text/css rel=stylesheet>

<title>عنوان یک</title>

</head>

<body>

<div class="tabber">

<div class="tabbertab">

<h2> عنوان یک </h2>

<ul>

<li><a href="#">لیست شماره ی یک</a></li>

<li><a href="#">لیست شماره ی دو</a></li>

</ul>

</div>

<div class="tabbertab">

<h2> عنوان دو </h2>

<ul>

<li><a href="#">لیست شماره ی یک</a></li>

<li><a href="#">لیست شماره ی دو</a></li>

</ul>

</div>

</div>

<div id="domtab"><!-- --></div>

</body>

</html>

ممنون

TehranNet

فایل js رو با عنوان text/css لینک دادی
درستش اینه:

کد:

<script type="text/javascript" src="tabber.js"></script>

takroz

TehranNet نوشته شده:فایل js رو با عنوان text/css لینک دادی
درستش اینه:

کد:

<script type="text/javascript" src="tabber.js"></script>

بازم درست نشد وقتی پابلیش میکنم به این صورت نشون میده.

عنوان یک

عنوان دو

با تشکر

TehranNet

یه خورده بیشتر دقت کن
کلاً لینک به CSS و JS از اول اشتباه بود
CSS درستش اینه:

کد:

<link href="st.css" rel="stylesheet" type="text/css"  />

takroz

دوستان من زیاد جاوا اسکریپت بلد نیستم
وقتی رو عنوان یک کلیک میشه رنگ عنوان دو عوض میشه

ملاحضه بفرمایید

takroz

دوستان مشکل قبلیم حل شد

حالا میخوام گوشه های پایین رو گرد کنم
چطوری میتونم این امکان رو اعمال کنم؟
[تصویر: 1204814151.gif]

با تشکر

Morteza

takroz نوشته شده:دوستان مشکل قبلیم حل شد

حالا میخوام گوشه های پایین رو گرد کنم
چطوری میتونم این امکان رو اعمال کنم؟

با تشکر

این یمی جوابش توی سوال و جواب های متفرقه سی اس اس هست
یه نگاهی بنداز !

حالت موضوعی \| حالت خطی درخواست کد منو ؟
نویسنده	پیام