استخدام علامات jquery كمسكينة موقع؟

Question

أريد استخدام علامات التبويب JQuery Cas A Navigator، أي يجب أن لا تحتوي علامات التبويب بالفعل على أي شيء ولكن بدلا من ذلك، عند النقر فوق المستخدم جميع علامات التبويب الأخرى ثم يجب أن ينتقل إلى صفحة أخرى.

أيضا، عند الوصول إلى تلك الصفحة، أريد أن تكون علامة التبويب الثانية التي يجب أن تكون عبوة مرئية.

مثال:

page1.aspx:

    Page1    |    Page2    |    Page3    |    Page4
Page1 content|    blank    |    blank    |    blank

يجب أن تكون عناوين علامة التبويب للصفحة 2 و 3 و 4 روابط فقط إلى الصفحة المناسبة.

page2.aspx:

    Page1    |    Page2    |    Page3    |    Page4
    blank    |Page2 content|    blank    |    blank

يجب أن تكون عناوين علامة التبويب للصفحة 1 و 3 و 4 روابط فقط إلى الصفحة المناسبة.

وهلم جرا.

أريد وضع النداء في علامة التبويب في صفحة رئيسية، ثم املأ المحتوى في كل صفحة علامة التبويب "كل صفحة" وترك الآخرين فارغة.

Answer 1

هل أنت متأكد أنك لا تريد شيئا مثل هذا:

<ul>
    <li><a href="somepage1.aspx" class="selected">Link 1</a></li>
    <li><a href="somepage2.aspx">Link 2</a></li>
    <li><a href="somepage3.aspx">Link 3</a></li>
    <li><a href="somepage4.aspx">Link 4</a></li>
</ul>
<div id="content1">
    <p>Some content for page 1</p>
</div>

أنا لا أرى ما كنت تستخدم jquery ل؟ ...

Answer 2

يدعم JQuery تحميل المحتوى عبر Ajax، ببساطة عن طريق توجيه الرابط إلى عنوان URL بدلا من معرف Div. ولكن بقدر ما أعرف أنه لا توجد وسيلة لتجعلها تذهب إلى صفحة أخرى. ربما تكون أفضل حالا فقط باستخدام تعريفات CSS الموجودة لعلامات التبويب وعدم استخدام البرنامج المساعد Tabs UI

تحديث. هذا هو Mockup HTML / CSS الأساسي لعلامات التبويب. ستحتاج إلى تنزيل نسخة من JQUERY UI حتى تحصل على CSS والصور، ولكن هذا هو الهيكل العظمي الذي يجعل علامات التبويب.

<ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected"><a href="/">Home</a></li>
    <li class="ui-tabs-nav-item"><a href="/somepage.html">Some Page</a></li>
</ul>

Answer 3

مستوحاة من Markالإجابة، وبعد بعض التجربة والخطأ والحفر من خلال ملف JQuery UI CSS، وصلت إلى ما يلي للعمل باستخدام أنماط JQuery UI الخاصة.

<div id = "nav-bar" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class = "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class = "ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Current Tab</li>
    <li class = "ui-state-default ui-corner-top"><a href="/some_page">To Some Page</a></li>
  </ul>
</div>

وفي ملف CSS آخر أضف هذا

#nav-bar.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding: .5em 1em !important;}