• 締切済み

colorboxの直接呼び出し方法について

通常、このような感じでjqueryのcolorboxを使ってますが、 (問題なく動きます。) <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.colorbox.js'></script> <script>  $(document).ready(function(){   $('.colorbox').colorbox({iframe:true, innerWidth:700, innerHeight:430});  }); </script> <li><a href='test2.html' class='colorbox'>test2</a></li> 質問ですが、ipadである場所をクリックしたときに、動作する部分に、動くスクリプト内でカラーボックスを使って表示するところの書き方がわかりません。 <script>  document.addEventListener('touchstart',catchTouch, false);  function catchTouch(event) {   cX =event.touches[0].clientX;   cY =event.touches[0].clientY;  if(10 <= cX && cX <= 170 && 10 <= cY && cY <= 40){pageScroll('fragment-1');}  else if (10 <= cX && cX <= 170 && 650 <= cY && cY <= 680){window.open('order4.html','colorbox');}  else if (10 <= cX && cX <= 170 && 690 <= cY && cY <= 720){location.href='call.html';}  else if (10 <= cX && cX <= 170 && 690 <= cY && cY <= 720){????????;}  } </script> ????????のところに何かを記述して、 <li><a href='test2.html' class='colorbox'>test2</a></li> これの動作と同じ事を実現するにはどのようにしたらよいのでしょうか?

みんなの回答

回答No.2

その質問文のコードは誰が作られたんですか? それを作った人にお願いするか、 http://www.tohoho-web.com/js/index.htm この内容を全部覚えたら(英単語を覚えるような感じでいいと思いますが)、何か書けるようになるんじゃないでしょうか。 足し算もわからずにかけ算をしようとしても、無理だと思います。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ipadはわかりませんが… jQueryを使っているのなら、同様にcolorboxの設定をしておいて  $(対象element).click(); では、だめでしょうか? はずしていましたら、失礼。

関連するQ&A

  • [jQuery]colorboxの干渉について

    当方jQuery初心者です。この場を借りてご質問させて下さい。 現在、jQueryのfullPage(http://alvarotrigo.com/fullPage/)を使用した、横スクロールのサイトを作成しております。 そのコンテンツの中で、同じくjQueryのcolorbox(http://www.jacklmoore.com/colorbox/)を使用し、 インラインhtmlを表示させたいと思っております。 しかしながら、同時に動かそうとするとcolorboxが全く動きません。 単体でのcolorboxは動くので、恐らくfullPageとの干渉を起こしていると思うのですが、何か解決方法はございませんでしょうか。 質問させていただく前に調べた結果、colorboxはスライダーと干渉を起こすとのことで、 colorboxのreturnFocusをfalseにすることで解消されるとあったのですが、それでも解消されませんでした。 どなたかご教示頂けますようよろしくお願い致します。 以下、現在のソースです。 ------------------------------------------------------------ <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type='text/javascript' src='js/moment.min.js'></script> <script src="js/jquery.easings.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#fullpage').fullpage({ //Navigation menu: false, anchors: ['page'], navigation: false, navigationPosition: 'right', navigationTooltips: ['page'], slidesNavigation: true, slidesNavPosition: 'top', //Scrolling css3: true, scrollingSpeed: 700, autoScrolling: false, scrollBar: false, easing: 'easeInOutCubic', easingcss3: 'ease', loopBottom: false, loopTop: false, loopHorizontal: true, continuousVertical: false, normalScrollElements: '#element1, .element2', scrollOverflow: true, touchSensitivity: 15, normalScrollElementTouchThreshold: 5, //Accessibility keyboardScrolling: true, animateAnchor: true, recordHistory: true, //Design controlArrows: true, verticalCentered: true, paddingTop: '-10em', resize : false, //Custom selectors sectionSelector: '.section', slideSelector: '.slide', //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, afterResize: function(){}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, onSlideLeave: function(anchorLink, index, slideIndex, direction){} }); }); </script> <script src="js/jquery.colorbox.js"></script> <script> $(function(){ $(".inline").colorbox({ inline: true width:"700px" returnFocus: false }); }); </script> ------------------------------------------------------------

  • jqueryのcolorboxを読込直後に開きたい

    ある書籍に記載されていた、以下のサンプルがあります。 このサンプルは、画像をクリックすると、colorboxプラグインを使用して モダルダイアログが開きます。 これを、ページを開いた直後(クリックせずに、自動的)に開きたいのです。 その方法をお教えいただけませんでしょうか。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery - colorbox plugin (Flash Video : Embedded)</title> <link href="base.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> <script src="../../scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery.colorbox-min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('a.youtube').colorbox(); }); </script> </head> <body> <p> <a class='youtube' href="content/flash.htm" title="Martin Luther King, Jr.'s last speech"> <img src="http://i4.ytimg.com/vi/o0FiCxZKuv8/default.jpg" alt="YouTube (Embedded)" /> </a> </p> </body> </html>

  • colorbox 画像が表示されない

    質問おねがい致します。 本業は紙媒体で 並行して独学でwebを学んでおりますがJqueryのcolorboxが表示されずに いきづまっています。パスが違うとか素人の失敗だとはおもうんですが ドリームウィーヴァーで作成しているのですが テンプレートファイルを作成し 追加ページで画像にリンクをはり <div class="box"><a href="/images/mapBig.png" rel="example1" title="map"><img src="/images/mapSmall.png" width="245" height="147" alt="map" /></a></div> としているのですが ライブビューではちゃんとポップアップになるのですが ブラウザーでプレビューしたりサーバーアップして確認すると オーバーレイの黒い背景と白い棒が2本でてきて画像自体が表示されません 下記はテンプレートのソースです。 ジャバの部分はcolorboxからペーストです colorbox.cssの画像へのパスは url(images/controls.png) に統一しています どなたかお願いします!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Style-Type" content="text/javascript" /> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> <!-- TemplateBeginEditable name="doctitle" --> <title>00000000000000000000</title> <!-- TemplateEndEditable --> <meta name="description" content="0000000000000000000000000" /> <meta name="keywords" content="00000000000000000000000000000" /> <link href="../css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="../js/colorbox/example1/colorbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="../js/colorbox/colorbox/jquery.colorbox.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $("a[rel='example2']").colorbox({transition:"fade"}); $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"}); $("a[rel='example4']").colorbox({slideshow:true}); $(".example5").colorbox(); $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}); $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"}); $(".example9").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } }); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> </head>

  • iframeからcolorboxの呼び出し

    IEでのみエラーが起きていて、ハマってしまいました。 おかしな所などご指摘頂けると助かります。 トップページ内にiframeを読み込んでいます。 iframe内に設置した画像をクリックして、 トップページのcolorboxを呼び出して表示させています。 下記サイトを参考に、colorboxをiframe内から親ページに展開させる設定しています。 http://www.browncrown.net/blog/?p=2120 ■top.html ・colorbox用のjquery、css等一式読込 ・トップページ内の画像でも同じ画像を呼び出して表示させている→問題なし ・専用javascript記載 =============== <script src="jquery.colorbox.js"></script> <script> function cbox(url,ttl){ var href = url; var title = ttl; $.fn.colorbox({ width: "500px", height: "500px", href:href, title:title, iframe: true, scrolling: "auto" }); } </script> ■iframe.html ・galleryviewというギャラリーを使用して、バナーをスライドしている。  その中の画像をクリックして、親(top.html)にcolorboxで画像を表示したい。 ・専用javascript記載 ================= <script> function callparent(url,ttl){ parent.cbox(url,ttl); } </script> ================= ・colorbox呼び出し <a href="javascript:callparent('img/hoge.jpg','画像タイトル')"><img src="img/bnr.jpg" /></a> この設定でIEでのみエラーが出てしまいます。。 他のブラウザでは問題なく表示されます。 エラー内容は下記になります。 ================= このページは表示できません • Web アドレス javascript:callparent('img/hoge.jpg' が正しいか確かめてください。 • 検索エンジンでそのページを探してください。 • 数分待ってから、ページを最新の情報に更新してください。 おかしな部分、ご指摘頂けると幸いです。

  • 垂直型のドロップダウンメニューの作成方法について

    http://jsajax.com/Articles/jQueryDropDownMenu2/1088を参考に下記のソースで垂直型のドロップダウンメニューを作成しました(動作はhttp://jsajax.com/Articles/jQueryDropDownMenu2/1088で「このサンプルを編集して試してみる」をクリックし、画面上部のテキストエリアに下記のソースを貼り付け「編集後クリックして実行!」で試す事が出来ます。 また、ローカルで試す場合は、ヘッダ部分に書かれているjsやcssをhttp://jdsharp.us/jQuery/plugins/jdMenu/やhttp://jquery.com/からダウンロードし、パスを調整していただければ大丈夫です)。 【ソース】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>jQuery - DropDown Menu - Vertical (jdMenu)</title> <link href="jQuery/jdMenu/jquery.jdMenu.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.dimensions.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.positionBy.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.bgiframe.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.jdMenu.js" type="text/javascript"></script> </head> <body> <div> <ul class="jd_menu jd_menu_vertical"> <li class="accessible"><a href="#" class="accessible">第1 ≫</a> <ul> <li><a href="#">第2-1 ≫</a> <ul> <li><a href="#" target="_blank">第2-1-1</a></li> <li><a href="#" target="_blank">第2-1-2</a></li> <li><a href="#" target="_blank">第2-1-3</a></li> <li><a href="#" target="_blank">第2-1-4</a></li> </ul> </li> <li><a href="#">第2-2 ≫</a> <ul> <li><a href="#" target="_blank">第2-2-1</a></li> <li><a href="#" target="_blank">第2-2-2</a></li> <li><a href="#" target="_blank">第2-2-3</a></li> <li><a href="#" target="_blank">第2-2-4</a></li> </ul> </li> <li><a href="#">第2-3 ≫</a> <ul> <li><a href="#" target="_blank">第2-3-1</a></li> <li><a href="#" target="_blank">第2-3-2</a></li> <li><a href="#" target="_blank">第2-3-3</a></li> <li><a href="#" target="_blank">第2-3-4</a></li> </ul> </li> <li><a href="#">第2-4 ≫</a> <ul> <li><a href="#" target="_blank">第2-4-1</a></li> <li><a href="#" target="_blank">第2-4-2</a></li> <li><a href="#" target="_blank">第2-4-3</a></li> <li><a href="#" target="_blank">第2-4-4</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html> ただし、実際に作ってみた所、今私が作っているサイトでは第二階層、第三階層の数が多く、 第一階層(上記ソースの「第1」)をマウスオーバーした際、すべての内容が表示されませんでした。 その為、下記のようなこと(縦だけではなく、横のスペースも有効に使いたい)を行いたいと思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 【第二階層(第三階層)の現在のイメージ】 第2-1 第2-2 第2-3 第2-4 【第二階層(第三階層)のやりたいイメージ】 第2-1 第2-2 第2-3 第2-4 以上、よろしくお願いします。

  • jquery.mobile 画像を中央に表示

    <!DOCTYPE html> <html lang="ja"> <head> <title>test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> </head> <body> <div id="home" data-role="page" data-theme="d"> <ul data-role="listview" data-dividertheme="a"> <li data-role="list-divider">test </li> <li> <a href="#"> <img src="C:\1.jpg"> test </a> </li> <li> <a href="#"> <img src="C:\2.jpg"> test </a> </li> </ul> </div> </body> </html> ------------------------- 上記のようなコードで携帯サイトを構築しているのですが 正方形ではない画像が、右上に寄ってしまうのですが これを回避する方法はありますか? 例で言うのであれば 添付画像の黄色い四角を画像表示エリアの中央に表示させたいです。

    • ベストアンサー
    • HTML
  • jQueryのタブにスクロールバーをつけたい

    jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身1(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか??

  • jquery-colorboxが反応しません・・・

    Wordpressのプラグインでjquery-colorboxってのを使いたいのですが上手く動いてくれません・・・ ネットで調べたらheader部分になにか追加したら動くとあったのですがよくわかりませんでした・・・ 今ヘッダー部分は <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title> <?php if ( is_home() ) { ?> <? bloginfo('name'); ?> | <?php bloginfo('description'); ?> <?php } ?> <?php if ( is_search() ) { ?> Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' &mdash; '); echo $count . ' '; _e('articles'); wp_reset_query(); ?> <?php } ?> <?php if ( is_404() ) { ?> <? bloginfo('name'); ?> | 404 Nothing Found <?php } ?> <?php if ( is_author() ) { ?> <? bloginfo('name'); ?> | Author Archives <?php } ?> <?php if ( is_single() ) { ?> <?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; ?> | <? bloginfo('name'); ?> <?php } ?> <?php if ( is_page() ) { ?> <? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; ?> | <?php wp_title(''); ?> <?php } ?> <?php if ( is_category() ) { ?> <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?> <?php } ?> <?php if ( is_month() ) { ?> <? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?> <?php } ?> <?php if ( is_day() ) { ?> <? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?> <?php } ?> <?php if (function_exists('is_tag')) { if ( is_tag() ) { ?> <?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?> </title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-ui-personalized-1.5.2.packed.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/sprinkle.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/script.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/colortip-1.0-jquery.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/contact-form.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/blogger.js"></script> <!--[if IE 6]> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styleie6.css" type="text/css" media="screen" /> <![endif]--> </head> ってなってます。どうすれば動きますか?? サイトURLはhttp://mooommm.com/ 添付画像はプラグインの設定部分の画像です!

  • 同HTML内で複数のjQueryを設置したいです

    買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか? 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>

  • jQueryタブメニュー内へのリンク方法。

    javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内(tab1~tab3)へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。

専門家に質問してみよう